Deprecate the BodyLarge component

sumup-oss · Aug 14, 2024 · 4d82123 · 4d82123
1 parent 6dc957a
commit 4d82123
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/circuit-ui/components/BodyLarge/BodyLarge.mdx b/packages/circuit-ui/components/BodyLarge/BodyLarge.mdx
@@ -5,7 +5,9 @@ import * as Stories from './BodyLarge.stories';
 
 # BodyLarge
 
-<Status variant="stable" />
+<Status variant="deprecated">
+Use the Body component in size `l` instead.
+</Status>
 
 The BodyLarge component is used to render content with large typography. Typically, large typography is intended for landing pages. In most cases, the [Body](Typography/Body) should be used instead.
 

diff --git a/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx b/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx
@@ -17,6 +17,7 @@ import { forwardRef, type HTMLAttributes, type Ref } from 'react';
 
 import type { AsPropType } from '../../types/prop-types.js';
 import { clsx } from '../../styles/clsx.js';
+import { deprecate } from '../../util/logger.js';
 
 import classes from './BodyLarge.module.css';
 
@@ -48,11 +49,17 @@ function getHTMLElement(variant?: Variant): AsPropType {
 }
 
 /**
- * The BodyLarge component is used to present the core textual content
- * to our users.
+ * @deprecated Use the Body component in size `l` instead.
  */
 export const BodyLarge = forwardRef<HTMLParagraphElement, BodyLargeProps>(
   ({ className, as, variant, ...props }, ref) => {
+    if (process.env.NODE_ENV !== 'production') {
+      deprecate(
+        'BodyLarge',
+        'The BodyLarge component has been deprecated. Use the Body component in size `l` instead.',
+      );
+    }
+
     const Element = as || getHTMLElement(variant);
     return (
       <Element