@patreon/studio/module/components/CardWithHeader/index.jsx

Patreon Studio Design System

import React from 'react';
import { tokens } from '../../tokens';
import devWarn from '../../utilities/dev-warn';
import { Card } from '../Card';
import { HeadingText } from '../HeadingText';
import { Stack } from '../Stack';
import styles from './CardWithHeader.module.css';
export function CardWithHeader({ title, headerAccessory, variant, elevation, padding, fluidHeight, children, className, style, id, 'data-tag': dataTag, }) {
    const computedTitle = typeof title === 'string' ? (<HeadingText as="h4" size="md">
        {title}
      </HeadingText>) : (title);
    // While we can support string title, we need to push developers to use HeadingText
    // to improve semantics since that will require users to define the html tag used.
    if (typeof title === 'string') {
        devWarn('CardWithHeader', 'title', 'Please use HeadingText for the title prop to provide proper semantics tag is used for screen readers');
    }
    return (<Card variant={variant} padding={padding} elevation={elevation} fluidHeight={fluidHeight} id={id} data-tag={dataTag} className={className} style={style}>
      <Stack gap={tokens.global.space.x8}>
        <div className={styles.heading}>
          {computedTitle}
          {headerAccessory && <div>{headerAccessory}</div>}
        </div>
        <div>{children}</div>
      </Stack>
    </Card>);
}
//# sourceMappingURL=index.jsx.map