feat(design): automatically add anchor link and copy URL button to article headings (#4260)

joannalauu · web-flow · commit 39cfdd46b72e · 2026-01-06T11:49:10.000-05:00
diff --git a/apps/daffio/src/app/docs/api/components/fragments/base/base.component.html b/apps/daffio/src/app/docs/api/components/fragments/base/base.component.html
@@ -1,9 +1,7 @@
 <div class="daffio-docs-api-base-fragment__title">
 	@if (child()) {
 		<h3 daffioDocsTocHeader [id]="doc().slug" [content]="doc().name" level="3">
-			<daffio-docs-heading-link [fragment]="doc().slug">
 				{{doc().name}}
-			</daffio-docs-heading-link>
 		</h3>
 	} @else {
 		<h1 [attr.id]="doc().slug">{{doc().name}}</h1>
diff --git a/apps/daffio/src/app/docs/api/components/fragments/base/base.component.ts b/apps/daffio/src/app/docs/api/components/fragments/base/base.component.ts
@@ -16,7 +16,6 @@ import {
 
 import { DaffioSafeHtmlPipe } from '../../../../../core/html-sanitizer/safe.pipe';
 import { DaffioInterceptNavigationDirective } from '../../../../../core/router/intercept-navigation.directive';
-import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
 import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
 import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
 import { DaffioDocsApiItemLabelComponent } from '../../api-item-label/api-item-label.component';
@@ -32,7 +31,6 @@ import { DaffioDocsApiItemLabelComponent } from '../../api-item-label/api-item-l
     DaffioDocsApiItemLabelComponent,
     DaffioInterceptNavigationDirective,
     DaffioDocsTocHeaderDirective,
-    DaffioDocsHeadingLinkComponent,
   ],
 })
 export class DaffioDocsApiBaseFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiDocBase> {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/examples/examples.component.html b/apps/daffio/src/app/docs/api/components/fragments/examples/examples.component.html
@@ -1,9 +1,7 @@
 @if (!child()) {
 	@if (doc().examples.length > 0) {
 		<h2 daffioDocsTocHeader id="examples" content="Examples" level="2">
-			<daffio-docs-heading-link [fragment]="'examples'">
 				Examples
-			</daffio-docs-heading-link>
 		</h2>
 	}
 	@for (example of doc().examples; track example.id) {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/examples/examples.component.ts b/apps/daffio/src/app/docs/api/components/fragments/examples/examples.component.ts
@@ -15,7 +15,6 @@ import {
 
 import { DaffioSafeHtmlPipe } from '../../../../../core/html-sanitizer/safe.pipe';
 import { DaffioInterceptNavigationDirective } from '../../../../../core/router/intercept-navigation.directive';
-import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
 import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
 import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
 
@@ -27,7 +26,6 @@ import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fr
     DaffioSafeHtmlPipe,
     DaffioInterceptNavigationDirective,
     DaffioDocsTocHeaderDirective,
-    DaffioDocsHeadingLinkComponent,
   ],
 })
 export class DaffioDocsApiExamplesFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiDocBase> {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/inputs/inputs.component.html b/apps/daffio/src/app/docs/api/components/fragments/inputs/inputs.component.html
@@ -1,15 +1,11 @@
 @if (doc().inputs.length > 0) {
 	@if (child()) {
 		<h4 daffioDocsTocHeader content="Inputs" id="{{doc().slug}}-inputs" level="4" class="daffio-docs-api-inputs-fragment__heading">
-			<daffio-docs-heading-link [fragment]="`${doc().slug}-inputs`">
 				<fa-icon [icon]="faChevronRight" class="daffio-docs-api-inputs-fragment__input-icon"></fa-icon> Inputs
-			</daffio-docs-heading-link>
 		</h4>
 	} @else {
 		<h2 daffioDocsTocHeader id="inputs" content="Inputs" level="2" class="daffio-docs-api-inputs-fragment__heading">
-			<daffio-docs-heading-link [fragment]="'inputs'">
 				<fa-icon [icon]="faChevronRight" class="daffio-docs-api-inputs-fragment__input-icon"></fa-icon> Inputs
-			</daffio-docs-heading-link>
 		</h2>
 	}
 	<div class="daffio-docs-api-inputs-fragment__member-grid">
diff --git a/apps/daffio/src/app/docs/api/components/fragments/inputs/inputs.component.ts b/apps/daffio/src/app/docs/api/components/fragments/inputs/inputs.component.ts
@@ -18,7 +18,6 @@ import {
   DaffDocTableOfContents,
 } from '@daffodil/docs-utils';
 
-import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
 import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
 import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
 import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/property-block.component';
@@ -32,7 +31,6 @@ import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/proper
     FaIconComponent,
     DaffioDocsApiPropertyBlockComponent,
     DaffioDocsTocHeaderDirective,
-    DaffioDocsHeadingLinkComponent,
   ],
 })
 export class DaffioDocsApiInputsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiDirective> {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/methods/methods.component.html b/apps/daffio/src/app/docs/api/components/fragments/methods/methods.component.html
@@ -1,15 +1,11 @@
 @if (doc().methods.length > 0) {
 	@if (child()) {
 		<h4 daffioDocsTocHeader id="{{doc().slug}}-methods" content="Methods" level="4" class="daffio-docs-api-methods-fragment__heading">
-			<daffio-docs-heading-link [fragment]="`${doc().slug}-methods`">
 				<span class="daffio-docs-api-methods-fragment__method-icon">()</span> Methods
-			</daffio-docs-heading-link>
 		</h4>
 	} @else {
 		<h2 daffioDocsTocHeader id="methods" content="Methods" level="2" class="daffio-docs-api-methods-fragment__heading">
-			<daffio-docs-heading-link [fragment]="'methods'">
 				<span class="daffio-docs-api-methods-fragment__method-icon">()</span> Methods
-			</daffio-docs-heading-link>
 		</h2>
 	}
 	<div class="daffio-docs-api-methods-fragment__member-grid">
diff --git a/apps/daffio/src/app/docs/api/components/fragments/methods/methods.component.ts b/apps/daffio/src/app/docs/api/components/fragments/methods/methods.component.ts
@@ -13,7 +13,6 @@ import {
   DaffDocTableOfContents,
 } from '@daffodil/docs-utils';
 
-import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
 import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
 import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
 import { DaffioDocsApiMethodBlockComponent } from '../../method-block/method-block.component';
@@ -26,7 +25,6 @@ import { DaffioDocsApiMethodBlockComponent } from '../../method-block/method-blo
   imports: [
     DaffioDocsApiMethodBlockComponent,
     DaffioDocsTocHeaderDirective,
-    DaffioDocsHeadingLinkComponent,
   ],
 })
 export class DaffioDocsApiMethodsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiType> {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/outputs/outputs.component.html b/apps/daffio/src/app/docs/api/components/fragments/outputs/outputs.component.html
@@ -1,15 +1,11 @@
 @if (doc().outputs.length > 0) {
 	@if (child()) {
 		<h4 daffioDocsTocHeader id="{{doc().slug}}-outputs" content="Outputs" level="4" class="daffio-docs-api-outputs-fragment__heading">
-			<daffio-docs-heading-link [fragment]="`${doc().slug}-outputs`">
 				<fa-icon [icon]="faChevronLeft" class="daffio-docs-api-outputs-fragment__output-icon"></fa-icon> Outputs
-			</daffio-docs-heading-link>
 		</h4>
 	} @else {
 		<h2 daffioDocsTocHeader id="outputs" content="Outputs" level="2" class="daffio-docs-api-outputs-fragment__heading">
-			<daffio-docs-heading-link [fragment]="'outputs'">
 				<fa-icon [icon]="faChevronLeft" class="daffio-docs-api-outputs-fragment__output-icon"></fa-icon> Outputs
-			</daffio-docs-heading-link>
 		</h2>
 	}
 	<div class="daffio-docs-api-outputs-fragment__member-grid">
diff --git a/apps/daffio/src/app/docs/api/components/fragments/outputs/outputs.component.ts b/apps/daffio/src/app/docs/api/components/fragments/outputs/outputs.component.ts
@@ -18,7 +18,6 @@ import {
   DaffDocTableOfContents,
 } from '@daffodil/docs-utils';
 
-import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
 import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
 import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
 import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/property-block.component';
@@ -32,7 +31,6 @@ import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/proper
     FaIconComponent,
     DaffioDocsApiPropertyBlockComponent,
     DaffioDocsTocHeaderDirective,
-    DaffioDocsHeadingLinkComponent,
   ],
 })
 export class DaffioDocsApiOutputsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiDirective> {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/params/params.component.html b/apps/daffio/src/app/docs/api/components/fragments/params/params.component.html
@@ -1,15 +1,11 @@
 @if (doc().parameterDocs?.length > 0) {
 	@if (child()) {
 		<h6 daffioDocsTocHeader id="{{doc().slug}}-params" content="Parameters" level="6" class="daffio-docs-api-params-fragment__heading">
-			<daffio-docs-heading-link [fragment]="`${doc().slug}-params`">
 				<fa-icon [icon]="faCode" class="daffio-docs-api-params-fragment__parameters-icon"></fa-icon>Parameters
-			</daffio-docs-heading-link>
 		</h6>
 	} @else {
 		<h4 daffioDocsTocHeader id="params" content="Parameters" level="4" class="daffio-docs-api-params-fragment__heading">
-			<daffio-docs-heading-link [fragment]="'params'">
 				<fa-icon [icon]="faCode" class="daffio-docs-api-params-fragment__parameters-icon"></fa-icon>Parameters
-			</daffio-docs-heading-link>
 		</h4>
 	}
 	@for (param of doc().parameterDocs; track $index) {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/params/params.component.ts b/apps/daffio/src/app/docs/api/components/fragments/params/params.component.ts
@@ -17,7 +17,6 @@ import {
 } from '@daffodil/docs-utils';
 
 import { DaffioInterceptNavigationDirective } from '../../../../../core/router/intercept-navigation.directive';
-import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
 import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
 import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
 
@@ -31,7 +30,6 @@ import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fr
     DaffioDocsTocHeaderDirective,
     DaffioInterceptNavigationDirective,
     DaffioSafeHtmlPipe,
-    DaffioDocsHeadingLinkComponent,
   ],
 })
 export class DaffioDocsApiParamsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffDocsApiFunction> {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/props/props.component.html b/apps/daffio/src/app/docs/api/components/fragments/props/props.component.html
@@ -1,15 +1,11 @@
 @if (hasPropsWithDocs()) {
 	@if (child()) {
 		<h4 daffioDocsTocHeader id="{{doc().slug}}-props" content="Properties" level="4">
-			<daffio-docs-heading-link [fragment]="`${doc().slug}-props`">
 				Properties
-			</daffio-docs-heading-link>
 		</h4>
 	} @else {
 		<h2 daffioDocsTocHeader id="props" content="Properties" level="2">
-			<daffio-docs-heading-link [fragment]="'props'">
 				Properties
-			</daffio-docs-heading-link>
 		</h2>
 	}
 	@if (isConcrete()) {
diff --git a/apps/daffio/src/app/docs/api/components/fragments/props/props.component.ts b/apps/daffio/src/app/docs/api/components/fragments/props/props.component.ts
@@ -14,7 +14,6 @@ import {
   DaffDocTableOfContents,
 } from '@daffodil/docs-utils';
 
-import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
 import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
 import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
 import { DaffioDocsApiInterfaceBlockComponent } from '../../interface-block/interface-block.component';
@@ -29,7 +28,6 @@ import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/proper
     DaffioDocsApiPropertyBlockComponent,
     DaffioDocsApiInterfaceBlockComponent,
     DaffioDocsTocHeaderDirective,
-    DaffioDocsHeadingLinkComponent,
   ],
 })
 export class DaffioDocsApiPropsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiType> {
diff --git a/apps/daffio/src/app/docs/components/heading-link/heading-link-theme.scss b/apps/daffio/src/app/docs/components/heading-link/heading-link-theme.scss
diff --git a/apps/daffio/src/app/docs/components/heading-link/heading-link.component.html b/apps/daffio/src/app/docs/components/heading-link/heading-link.component.html
diff --git a/apps/daffio/src/app/docs/components/heading-link/heading-link.component.scss b/apps/daffio/src/app/docs/components/heading-link/heading-link.component.scss
diff --git a/apps/daffio/src/app/docs/components/heading-link/heading-link.component.ts b/apps/daffio/src/app/docs/components/heading-link/heading-link.component.ts
diff --git a/apps/daffio/src/scss/component-themes.scss b/apps/daffio/src/scss/component-themes.scss
@@ -18,7 +18,6 @@
 @use '../app/docs/api/components/fragments/outputs/outputs-theme.scss' as api-outputs-fragment;
 @use '../app/docs/api/components/method-block/method-block-theme' as api-method-block;
 @use '../app/docs/api/components/api-item-label/api-item-label-theme' as api-item-label;
-@use '../app/docs/components/heading-link/heading-link-theme' as docs-heading-link;
 @use '../app/docs/components/doc-viewer/doc-viewer-theme' as doc-viewer;
 @use '../app/content/home/components/home-callout-sponsors/home-callout-sponsors-theme' as home-callout-sponsors;
 
@@ -45,6 +44,5 @@
 	@include api-inputs-fragment.daffio-api-inputs-fragment-theme($theme);
 	@include api-outputs-fragment.daffio-api-outputs-fragment-theme($theme);
 	@include api-item-label.daffio-api-item-label-theme($theme);
-	@include docs-heading-link.daffio-docs-heading-link-theme($theme);
 	@include doc-viewer.daffio-doc-viewer-theme($theme);
 }
diff --git a/libs/design-examples/article/src/article-headings/article-headings.component.html b/libs/design-examples/article/src/article-headings/article-headings.component.html
@@ -1,6 +1,7 @@
 <daff-article>
 	<h1>This is a h1 heading with <code>code</code></h1>
 	<h2>This is a h2 heading with <code>code</code></h2>
+	<h2 nolink>This is a h2 heading with no heading link</h2>
 	<h3>This is a h3 heading with <code>code</code></h3>
 	<h4>This is a h4 heading with <code>code</code></h4>
 	<h5>This is a h5 heading with <code>code</code></h5>
diff --git a/libs/design/article/README.md b/libs/design/article/README.md
@@ -7,6 +7,8 @@ Article can be used on any content page that displays large blocks of text-drive
 ## Supported elements
 
 ### Headings
+All `<h2>`, `<h3>`, `<h4>` headings have an anchor link that directs users to that heading on click and a copy button that copies the heading URL to clipboard on click by default. Disable this by adding a `nolink` attribute to the heading element.
+
 <design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
 
 ### Article Meta
diff --git a/libs/design/article/src/article-heading-link/heading-link/heading-link.component.html b/libs/design/article/src/article-heading-link/heading-link/heading-link.component.html
@@ -0,0 +1,10 @@
+<a class="daff-article-heading-link__anchor" routerLink="." [fragment]="fragment()" queryParamsHandling="preserve">
+	{{ label() }}
+</a>
+<button daff-icon-button class="daff-article-heading-link__button" [attr.aria-label]="ariaLabel" (click)="copyLink()">
+	@if (copied()) {
+		<fa-icon [icon]="faCheck" />
+	} @else {
+		<fa-icon [icon]="faLink" />
+	}
+</button>
diff --git a/libs/design/article/src/article-heading-link/heading-link/heading-link.component.scss b/libs/design/article/src/article-heading-link/heading-link/heading-link.component.scss
@@ -0,0 +1,23 @@
+:host {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+
+	&:hover {
+		.daff-article-heading-link__button {
+			opacity: 1;
+		}
+	}
+}
+
+.daff-article-heading-link {
+	&__anchor {
+		text-decoration: none;
+	}
+
+	&__button {
+		opacity: 0;
+		transition: opacity 200ms ease;
+	}
+}
diff --git a/libs/design/article/src/article-heading-link/heading-link/heading-link.component.spec.ts b/libs/design/article/src/article-heading-link/heading-link/heading-link.component.spec.ts
diff --git a/libs/design/article/src/article-heading-link/heading-link/heading-link.component.ts b/libs/design/article/src/article-heading-link/heading-link/heading-link.component.ts
diff --git a/libs/design/article/src/article-heading-link/service/heading-link.service.spec.ts b/libs/design/article/src/article-heading-link/service/heading-link.service.spec.ts
diff --git a/libs/design/article/src/article-heading-link/service/heading-link.service.ts b/libs/design/article/src/article-heading-link/service/heading-link.service.ts
diff --git a/libs/design/article/src/article/article.component.ts b/libs/design/article/src/article/article.component.ts
