Add back default heading element (#2198)

sumup-oss · Jul 23, 2023 · 21594d2 · 21594d2
1 parent 451dbdc
commit 21594d2
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 9 deletions.
diff --git a/.changeset/young-shirts-sleep.md b/.changeset/young-shirts-sleep.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Added back the default heading element to the Title, Headline and SubHeadline components in production mode.
diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.tsx
@@ -69,6 +69,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       invalid,
       indeterminate = false,
       'aria-describedby': descriptionId,
+      children,
       ...props
     },
     passedRef,
@@ -116,7 +117,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           )}
         />
         <label htmlFor={id} className={classes.label}>
-          {label}
+          {label || children}
           <Checkmark aria-hidden="true" data-symbol="checked" />
           <IndeterminateIcon aria-hidden="true" data-symbol="indeterminate" />
         </label>

diff --git a/packages/circuit-ui/components/Headline/Headline.tsx b/packages/circuit-ui/components/Headline/Headline.tsx
@@ -37,11 +37,13 @@ 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) => {
-    if (process.env.NODE_ENV !== 'production' && !Element) {
+  ({ className, as, size = 'one', ...props }, ref) => {
+    if (process.env.NODE_ENV !== 'production' && !as) {
       throw new CircuitError('Headline', 'The `as` prop is required.');
     }
 
+    const Element = as || 'h2';
+
     return (
       <Element
         {...props}

diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx
@@ -88,6 +88,7 @@ export const Selector = forwardRef<HTMLInputElement, SelectorProps>(
       className,
       style,
       size = 'mega',
+      children,
       ...props
     },
     ref,
@@ -141,11 +142,11 @@ export const Selector = forwardRef<HTMLInputElement, SelectorProps>(
         >
           {hasDescription ? (
             <Fragment>
-              <span className={classes.title}>{label}</span>
+              <span className={classes.title}>{label || children}</span>
               <span aria-hidden="true">{description}</span>
             </Fragment>
           ) : (
-            label
+            label || children
           )}
         </label>
         {hasDescription && (

diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx b/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx
@@ -34,11 +34,13 @@ export interface SubHeadlineProps extends HTMLAttributes<HTMLHeadingElement> {
  * element, except h1.
  */
 export const SubHeadline = forwardRef<HTMLHeadingElement, SubHeadlineProps>(
-  ({ className, as: Element, ...props }, ref) => {
-    if (process.env.NODE_ENV !== 'production' && !Element) {
+  ({ className, as, ...props }, ref) => {
+    if (process.env.NODE_ENV !== 'production' && !as) {
       throw new CircuitError('SubHeadline', 'The `as` prop is required.');
     }
 
+    const Element = as || 'h2';
+
     return (
       <Element {...props} ref={ref} className={clsx(classes.base, className)} />
     );

diff --git a/packages/circuit-ui/components/Title/Title.tsx b/packages/circuit-ui/components/Title/Title.tsx
@@ -37,11 +37,13 @@ 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) => {
-    if (process.env.NODE_ENV !== 'production' && !Element) {
+  ({ className, as, size = 'one', ...props }, ref) => {
+    if (process.env.NODE_ENV !== 'production' && !as) {
       throw new CircuitError('Title', 'The `as` prop is required.');
     }
 
+    const Element = as || 'h1';
+
     return (
       <Element
         {...props}