open-formulieren · sergei-maertens · Mar 12, 2025
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
diff --git a/src/components/Card.stories.jsx → src/components/Card.stories.tsx b/src/components/Card.stories.jsx → src/components/Card.stories.tsx
@@ -1,3 +1,5 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
 import Body from './Body';
 import Card from './Card';
 
@@ -6,20 +8,18 @@ export default {
   component: Card,
   argTypes: {
     children: {control: false},
-    captionComponent: {control: false},
-    titleComponent: {control: false},
   },
   parameters: {
     controls: {sort: 'requiredFirst'},
   },
-};
+} satisfies Meta<typeof Card>;
+
+type Story = StoryObj<typeof Card>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     title: 'The Rig',
-    caption: '',
-    modifiers: [],
-    blockClassName: '',
     children: <Body>By Blanck Mass</Body>,
+    mobileHeaderHidden: false,
   },
 };
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -0,0 +1,77 @@
+import {Heading} from '@utrecht/component-library-react';
+
+import {getBEMClassName} from '@/utils';
+
+export type HeadingType = 'title' | 'subtitle';
+
+export interface CardTitleProps {
+  title: React.ReactNode;
+  /**
+   * Heading level, mapping to the h1/h2/h3/h4/h5/h6 elements. The default is level 2
+   * to avoid accidentally putting multiple "page titles", which people have opinions
+   * about. This applies to direct low-level `CardTitle` usage - the `Card` component
+   * itself defaults it to level 1.
+   */
+  headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+  headingType?: HeadingType;
+  padded?: boolean;
+}
+
+const CardTitle: React.FC<CardTitleProps> = ({
+  title,
+  headingLevel = 2,
+  headingType = 'title',
+  padded = false,
+}) => {
+  const modifiers = [];
+  if (padded) modifiers.push('padded');
+  return (
+    <header className={getBEMClassName('card__header', modifiers)}>
+      <Heading level={headingLevel} className={getBEMClassName(headingType)}>
+        {title}
+      </Heading>
+    </header>
+  );
+};
+
+export interface CardProps {
+  /**
+   * Title of the card, displayed in separate header.
+   */
+  title?: React.ReactNode;
+  /**
+   * Title heading type, controls appearance.
+   */
+  titleHeadingType?: HeadingType;
+  /**
+   * The card body content.
+   */
+  children?: React.ReactNode;
+  /**
+   * If enabled, the header is hidden on mobile viewports.
+   */
+  mobileHeaderHidden?: boolean;
+}
+
+const Card: React.FC<CardProps & React.ComponentPropsWithoutRef<'div'>> = ({
+  title,
+  children,
+  titleHeadingType = 'title',
+  mobileHeaderHidden = false,
+  ...restProps
+}) => {
+  const modifiers = [];
+  if (mobileHeaderHidden) modifiers.push('mobile-header-hidden');
+
+  const className = getBEMClassName('card', modifiers);
+  return (
+    <div className={className} {...restProps}>
+      {/* Emit header/title only if there is one */}
+      {title && <CardTitle title={title} headingLevel={1} headingType={titleHeadingType} />}
+      {title ? <div className={getBEMClassName('card__body')}> {children} </div> : children}
+    </div>
+  );
+};
+
+export default Card;
+export {CardTitle};
diff --git a/src/components/FormStep/index.jsx b/src/components/FormStep/index.jsx
@@ -759,7 +759,7 @@ const FormStep = () => {
   const previousPage = getPreviousPageHref();
   return (
     <LiteralsProvider literals={formStep.literals}>
-      <Card title={form.name} titleComponent="h1" modifiers={['mobile-header-hidden']}>
+      <Card title={form.name} mobileHeaderHidden>
         {isLoadingSomething ? <Loader modifiers={['centered']} /> : null}
 
         {previousPage && <PreviousLink to={previousPage} onClick={onPrevPage} position="start" />}
@@ -772,12 +772,7 @@ const FormStep = () => {
         )}
         {!isLoadingSomething && configuration ? (
           <>
-            <CardTitle
-              title={submissionStep.name}
-              component="h2"
-              headingType="subtitle"
-              modifiers={['padded']}
-            />
+            <CardTitle title={submissionStep.name} headingType="subtitle" padded />
             <Suspense fallback={<Loader modifiers={['centered']} />}>
               <form onSubmit={onReactSubmit} noValidate>
                 <Form

diff --git a/src/components/ProgressIndicator/index.jsx b/src/components/ProgressIndicator/index.jsx
@@ -1,9 +1,9 @@
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {useLocation} from 'react-router';
 
 import Caption from 'components/Caption';
-import Card from 'components/Card';
 import List from 'components/List';
 import useWindowResize from 'hooks/useWindowResize';
 
@@ -23,11 +23,6 @@ const ProgressIndicator = ({
   const [resizeCounter, setResizeCounter] = useState(0);
   const buttonRef = useRef(null);
 
-  const modifiers = [];
-  if (expanded) {
-    modifiers.push('expanded');
-  }
-
   // collapse the expanded progress indicator if nav occurred, see
   // open-formulieren/open-forms#2673. It's important that *only* the pathname triggers
   // the effect, which is why exhaustive deps is ignored.
@@ -59,7 +54,12 @@ const ProgressIndicator = ({
       }
     : undefined;
   return (
-    <Card blockClassName="progress-indicator" modifiers={modifiers} style={customProperties}>
+    <div
+      className={clsx('openforms-progress-indicator', {
+        'openforms-progress-indicator--expanded': expanded,
+      })}
+      style={customProperties}
+    >
       <MobileButton
         ref={buttonRef}
         ariaMobileIconLabel={ariaMobileIconLabel}
@@ -90,7 +90,7 @@ const ProgressIndicator = ({
           ))}
         </List>
       </nav>
-    </Card>
+    </div>
   );
 };
 

diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.jsx b/src/components/appointments/CreateAppointment/CreateAppointment.jsx
@@ -86,7 +86,7 @@ const Wrapper = ({children, ...props}) => {
   if (isConfirmation) return <>{children}</>;
 
   return (
-    <Card titleComponent="h1" modifiers={['mobile-header-hidden']} {...props}>
+    <Card mobileHeaderHidden {...props}>
       {children}
     </Card>
   );

diff --git a/src/components/appointments/CreateAppointment/Summary.jsx b/src/components/appointments/CreateAppointment/Summary.jsx
@@ -206,7 +206,7 @@ const Summary = () => {
         }
         component="h2"
         headingType="subtitle"
-        modifiers={['padded']}
+        padded
       />
 
       {processingError && <ErrorMessage>{processingError}</ErrorMessage>}

diff --git a/src/components/appointments/steps/ChooseProductStep.jsx b/src/components/appointments/steps/ChooseProductStep.jsx
@@ -193,9 +193,8 @@ const ChooseProductStep = ({navigateTo = null}) => {
             defaultMessage="Select your product(s)"
           />
         }
-        component="h2"
         headingType="subtitle"
-        modifiers={['padded']}
+        padded
       />
       <Formik
         initialValues={{...initialValues, ...stepData}}

diff --git a/src/components/appointments/steps/ContactDetailsStep.jsx b/src/components/appointments/steps/ContactDetailsStep.jsx
@@ -75,9 +75,8 @@ const ContactDetailsStep = ({navigateTo = null}) => {
             defaultMessage="Contact details"
           />
         }
-        component="h2"
         headingType="subtitle"
-        modifiers={['padded']}
+        padded
       />
 
       {loading && <Loader modifiers={['centered']} />}

diff --git a/src/components/appointments/steps/LocationAndTimeStep.jsx b/src/components/appointments/steps/LocationAndTimeStep.jsx
@@ -118,9 +118,8 @@ const LocationAndTimeStep = ({navigateTo = null}) => {
             defaultMessage="Location and time"
           />
         }
-        component="h2"
         headingType="subtitle"
-        modifiers={['padded']}
+        padded
       />
 
       <ProductSummary products={products} />