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 - + +Use the Headline component in size `s` instead. + 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 { } /** - * 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( ({ className, as, ...props }, ref) => { @@ -44,6 +44,13 @@ export const SubHeadline = forwardRef( 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 (