From ee3d14f242bbe2e185a67f400b71c4914932c96b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <github@connorbaer.com>
Date: Wed, 14 Aug 2024 21:51:26 +0200
Subject: [PATCH] Deprecate the SubHeadline component

---
 .../circuit-ui/components/SubHeadline/SubHeadline.mdx |  4 +++-
 .../circuit-ui/components/SubHeadline/SubHeadline.tsx | 11 +++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx b/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx
index 0909f36672..ebf2627ab0 100644
--- a/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx
+++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx
@@ -5,7 +5,9 @@ import * as Stories from './SubHeadline.stories';
 
 # SubHeadline
 
-<Status variant="stable" />
+<Status variant="deprecated">
+Use the Headline component in size `s` instead.
+</Status>
 
 The SubHeadline component helps break up larger related chunks of content in the same section. It is typically used to separate subsections within a card.
 
diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx b/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx
index a7832923d5..15840419d5 100644
--- a/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx
+++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx
@@ -17,6 +17,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 
 import { clsx } from '../../styles/clsx.js';
 import { CircuitError } from '../../util/errors.js';
+import { deprecate } from '../../util/logger.js';
 
 import classes from './SubHeadline.module.css';
 
@@ -30,8 +31,7 @@ export interface SubHeadlineProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 
 /**
- * A flexible SubHeadline component capable of rendering using any HTML heading
- * element, except h1.
+ * @deprecated Use the Headline component in size `s` instead.
  */
 export const SubHeadline = forwardRef<HTMLHeadingElement, SubHeadlineProps>(
   ({ className, as, ...props }, ref) => {
@@ -44,6 +44,13 @@ export const SubHeadline = forwardRef<HTMLHeadingElement, SubHeadlineProps>(
       throw new CircuitError('SubHeadline', 'The `as` prop is required.');
     }
 
+    if (process.env.NODE_ENV !== 'production') {
+      deprecate(
+        'SubHeadline',
+        'The SubHeadline component has been deprecated. Use the Headline component in size `s` instead.',
+      );
+    }
+
     const Element = as || 'h2';
 
     return (