Throw error for missing as prop (#2195)

.changeset/rude-bikes-scream.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added a helpful error message when the Title, Headline or SubHeadline components are missing the `as` prop.

packages/circuit-ui/components/Headline/Headline.tsx

@@ -16,6 +16,7 @@
 import { HTMLAttributes, forwardRef } from 'react';
 
 import { clsx } from '../../styles/clsx.js';
+import { CircuitError } from '../../util/errors.js';
 
 import classes from './Headline.module.css';
 
@@ -36,13 +37,19 @@ export interface HeadlineProps extends HTMLAttributes<HTMLHeadingElement> {
  * A flexible headline component capable of rendering any HTML heading element.
  */
 export const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(
-  ({ className, as: Element, size = 'one', ...props }, ref) => (
-    <Element
-      {...props}
-      ref={ref}
-      className={clsx(classes.base, classes[size], className)}
-    />
-  ),
+  ({ className, as: Element, size = 'one', ...props }, ref) => {
+    if (process.env.NODE_ENV !== 'production' && !Element) {
+      throw new CircuitError('Headline', 'The `as` prop is required.');
+    }
+
+    return (
+      <Element
+        {...props}
+        ref={ref}
+        className={clsx(classes.base, classes[size], className)}
+      />
+    );
+  },
 );
 
 Headline.displayName = 'Headline';

packages/circuit-ui/components/SubHeadline/SubHeadline.tsx

@@ -16,6 +16,7 @@
 import { HTMLAttributes, forwardRef } from 'react';
 
 import { clsx } from '../../styles/clsx.js';
+import { CircuitError } from '../../util/errors.js';
 
 import classes from './SubHeadline.module.css';
 
@@ -33,9 +34,15 @@ export interface SubHeadlineProps extends HTMLAttributes<HTMLHeadingElement> {
  * element, except h1.
  */
 export const SubHeadline = forwardRef<HTMLHeadingElement, SubHeadlineProps>(
-  ({ className, as: Element, ...props }, ref) => (
-    <Element {...props} ref={ref} className={clsx(classes.base, className)} />
-  ),
+  ({ className, as: Element, ...props }, ref) => {
+    if (process.env.NODE_ENV !== 'production' && !Element) {
+      throw new CircuitError('SubHeadline', 'The `as` prop is required.');
+    }
+
+    return (
+      <Element {...props} ref={ref} className={clsx(classes.base, className)} />
+    );
+  },
 );
 
 SubHeadline.displayName = 'SubHeadline';

packages/circuit-ui/components/Title/Title.tsx

@@ -16,6 +16,7 @@
 import { HTMLAttributes, forwardRef } from 'react';
 
 import { clsx } from '../../styles/clsx.js';
+import { CircuitError } from '../../util/errors.js';
 
 import classes from './Title.module.css';
 
@@ -36,13 +37,19 @@ export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
  * A flexible title component capable of rendering any HTML heading element.
  */
 export const Title = forwardRef<HTMLHeadingElement, TitleProps>(
-  ({ className, as: Element, size = 'one', ...props }, ref) => (
-    <Element
-      {...props}
-      ref={ref}
-      className={clsx(classes.base, classes[size], className)}
-    />
-  ),
+  ({ className, as: Element, size = 'one', ...props }, ref) => {
+    if (process.env.NODE_ENV !== 'production' && !Element) {
+      throw new CircuitError('Title', 'The `as` prop is required.');
+    }
+
+    return (
+      <Element
+        {...props}
+        ref={ref}
+        className={clsx(classes.base, classes[size], className)}
+      />
+    );
+  },
 );
 
 Title.displayName = 'Title';