From f1fdd5b0106d3f556afbb1f7a359f2de6fe445fb Mon Sep 17 00:00:00 2001
From: Suneet Tipirneni <77477100+suneettipirneni@users.noreply.github.com>
Date: Mon, 17 Apr 2023 17:33:51 -0400
Subject: [PATCH] refactor(website): extract shared code heading styling into
 component (#9414)

* refactor(website): extract shared code heading styling into component

* chore: remove redundant variable
---
 apps/website/src/components/CodeHeading.tsx   | 28 +++++++++++++++++++
 apps/website/src/components/NameText.tsx      |  3 --
 apps/website/src/components/Property.tsx      | 20 ++++---------
 .../src/components/model/enum/EnumMember.tsx  | 12 ++++----
 .../components/model/method/MethodHeader.tsx  | 15 ++++------
 5 files changed, 45 insertions(+), 33 deletions(-)
 create mode 100644 apps/website/src/components/CodeHeading.tsx
 delete mode 100644 apps/website/src/components/NameText.tsx

diff --git a/apps/website/src/components/CodeHeading.tsx b/apps/website/src/components/CodeHeading.tsx
new file mode 100644
index 000000000..a7573e4d1
--- /dev/null
+++ b/apps/website/src/components/CodeHeading.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { Anchor } from './Anchor';
+
+export interface CodeListingProps {
+	/**
+	 * The value of this heading.
+	 */
+	children: ReactNode;
+	/**
+	 * Additional class names to apply to the root element.
+	 */
+	className?: string | undefined;
+	/**
+	 * The href of this heading.
+	 */
+	href?: string | undefined;
+}
+
+export function CodeHeading({ href, className, children }: CodeListingProps) {
+	return (
+		<div
+			className={`flex flex-row flex-wrap place-items-center gap-1 break-all font-mono text-lg font-bold ${className}`}
+		>
+			{href ? <Anchor href={href} /> : null}
+			{children}
+		</div>
+	);
+}
diff --git a/apps/website/src/components/NameText.tsx b/apps/website/src/components/NameText.tsx
deleted file mode 100644
index b8b7e4eca..000000000
--- a/apps/website/src/components/NameText.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function NameText({ name }: { name: string }) {
-	return <h4 className="break-all font-mono text-lg font-bold">{name}</h4>;
-}
diff --git a/apps/website/src/components/Property.tsx b/apps/website/src/components/Property.tsx
index de57b8bbe..a5e9b803c 100644
--- a/apps/website/src/components/Property.tsx
+++ b/apps/website/src/components/Property.tsx
@@ -5,7 +5,7 @@ import type {
 	ApiPropertySignature,
 } from '@microsoft/api-extractor-model';
 import type { PropsWithChildren } from 'react';
-import { Anchor } from './Anchor';
+import { CodeHeading } from './CodeHeading';
 import { ExcerptText } from './ExcerptText';
 import { InheritanceText } from './InheritanceText';
 import { TSDoc } from './documentation/tsdoc/TSDoc';
@@ -55,21 +55,13 @@ export function Property({
 						) : null}
 					</div>
 				) : null}
-				<div className="flex flex-row flex-wrap place-items-center gap-1">
-					<Anchor href={`#${item.displayName}`} />
-					<h4 className="break-all font-mono text-lg font-bold">
-						{item.displayName}
-						{item.isOptional ? '?' : ''}
-					</h4>
+				<CodeHeading href={`#${item.displayName}`}>
+					{`${item.displayName}${item.isOptional ? '?' : ''}`}
+					<span>{separator}</span>
 					{item.propertyTypeExcerpt.text ? (
-						<>
-							<h4 className="font-mono text-lg font-bold">{separator}</h4>
-							<h4 className="break-all font-mono text-lg font-bold">
-								<ExcerptText excerpt={item.propertyTypeExcerpt} model={item.getAssociatedModel()!} />
-							</h4>
-						</>
+						<ExcerptText excerpt={item.propertyTypeExcerpt} model={item.getAssociatedModel()!} />
 					) : null}
-				</div>
+				</CodeHeading>
 			</div>
 			{hasSummary || inheritedFrom ? (
 				<div className="mb-4 flex flex-col gap-4">
diff --git a/apps/website/src/components/model/enum/EnumMember.tsx b/apps/website/src/components/model/enum/EnumMember.tsx
index d77902f87..9d9afc754 100644
--- a/apps/website/src/components/model/enum/EnumMember.tsx
+++ b/apps/website/src/components/model/enum/EnumMember.tsx
@@ -1,20 +1,18 @@
 import type { ApiEnumMember } from '@microsoft/api-extractor-model';
-import { Anchor } from '../../Anchor';
-import { NameText } from '../../NameText';
 import { SignatureText } from '../../SignatureText';
 import { TSDoc } from '../../documentation/tsdoc/TSDoc';
+import { CodeHeading } from '~/components/CodeHeading';
 
 export function EnumMember({ member }: { member: ApiEnumMember }) {
 	return (
 		<div className="flex flex-col scroll-mt-30" id={member.displayName}>
-			<div className="flex flex-col gap-2 md:flex-row md:place-items-center md:-ml-8.5">
-				<Anchor href={`#${member.displayName}`} />
-				<NameText name={member.name} />
-				<h4 className="font-bold">=</h4>
+			<CodeHeading className="md:-ml-8.5" href={`#${member.displayName}`}>
+				{member.name}
+				<span>=</span>
 				{member.initializerExcerpt ? (
 					<SignatureText excerpt={member.initializerExcerpt} model={member.getAssociatedModel()!} />
 				) : null}
-			</div>
+			</CodeHeading>
 			{member.tsdocComment ? <TSDoc item={member} tsdoc={member.tsdocComment.summarySection} /> : null}
 		</div>
 	);
diff --git a/apps/website/src/components/model/method/MethodHeader.tsx b/apps/website/src/components/model/method/MethodHeader.tsx
index f6531b5fb..0e7fd6077 100644
--- a/apps/website/src/components/model/method/MethodHeader.tsx
+++ b/apps/website/src/components/model/method/MethodHeader.tsx
@@ -1,7 +1,7 @@
 import type { ApiMethod, ApiMethodSignature } from '@microsoft/api-extractor-model';
 import { ApiItemKind } from '@microsoft/api-extractor-model';
 import { useMemo } from 'react';
-import { Anchor } from '~/components/Anchor';
+import { CodeHeading } from '~/components/CodeHeading';
 import { ExcerptText } from '~/components/ExcerptText';
 import { resolveParameters } from '~/util/model';
 
@@ -49,14 +49,11 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
 						) : null}
 					</div>
 				) : null}
-				<div className="flex flex-row flex-wrap place-items-center gap-1">
-					<Anchor href={`#${key}`} />
-					<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(method)}</h4>
-					<h4 className="font-mono text-lg font-bold">:</h4>
-					<h4 className="break-all font-mono text-lg font-bold">
-						<ExcerptText excerpt={method.returnTypeExcerpt} model={method.getAssociatedModel()!} />
-					</h4>
-				</div>
+				<CodeHeading href={`#${key}`}>
+					{getShorthandName(method)}
+					<span>:</span>
+					<ExcerptText excerpt={method.returnTypeExcerpt} model={method.getAssociatedModel()!} />
+				</CodeHeading>
 			</div>
 		</div>
 	);