synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
113 lines (111 loc) • 4.68 kB
TypeScript
import { CardLabel } from '@/components/row_renderers/utils/CardFooter';
import React from 'react';
import { DescriptionConfig } from '../CardContainerLogic';
import { GenericCardProps } from '@/components/GenericCard/GenericCard';
export type HeaderCardV2Props = {
/** Type label displayed at the top of the card */
type: string;
/** Main title of the card */
title: string;
/** Optional subtitle, often used for author or additional context */
subTitle?: string;
/** Main description text */
description: string;
/** Maximum number of secondary labels to show before "Show More" */
secondaryLabelLimit?: number;
/** Array of label-value pairs to display in the card footer */
values?: CardLabel[];
/** Whether to align the card to the left navigation */
isAlignToLeftNav?: boolean;
/** Configuration for the collapsible description */
descriptionConfig?: DescriptionConfig;
/** Character count threshold for truncating description (default 400) */
charCountCutoff?: number;
/** Optional URL for making the title clickable */
href?: string;
/** Target attribute for the title link */
target?: string;
/** Icon element to display */
icon: React.ReactNode;
/** Optional background image URL */
backgroundImage?: string;
/** Force values section to appear below main content */
forceStackedLayout?: boolean;
/** Optional CTA link(s) to display below description. Accepts a single config or an array. */
ctaLinkConfig?: GenericCardProps['ctaLinkConfig'];
};
/**
* HeaderCardV2 Component OUT OF DATE COMMENTS
*
* A material-UI based card component for displaying detailed information with metadata.
* This component supports responsive layouts, background images, and dynamic content
* organization.
*
* Layout Structure:
```
┌───────────────────────────────────────────────────────────────┐
│ ┌─────┐ Type Label │
│ │Icon │ Title │
│ │ │ Subtitle │
│ └─────┘ │
│ Description Metadata │
│ [Show More/Less] -------- │
│ Label 1 Value 1 │
│ [External Site Button] Label 2 Value 2 │
└───────────────────────────────────────────────────────────────┘
```
*
* Features:
* - Responsive layout with configurable breakpoints
* - Optional background image with overlay
* - Collapsible description text
* - Right-aligned or stacked metadata section
* - Call-to-action buttons
* - SEO-friendly meta tags management
*
* Meta Tags Handling:
* - Updates document title with card title
* - Sets meta description from card description/subtitle
* - Restores original meta data on component cleanup
*
* Layout Modes:
* - Default: Icon + Content | Metadata (on desktop)
* - Stacked: Full width content with metadata below
* - Mobile: All sections stack vertically
*
* @component
* @example
* ```tsx
* <HeaderCardV2
* type="Study"
* title="Example Study"
* description="Study description"
* values={[['Status', 'Active'], ['Access', 'Public']]}
* icon={<StudyIcon />}
* ctaLinkConfig={{text: "View Standard on External Website", link: "url"}}
* />
* ```
* Core component logic:
* 1. Responsive Layout:
* - Uses MUI Grid for flexible layouts
* - Switches to stacked layout on mobile, when forceStackedLayout is true,
*
* 2. Meta Tags:
* - Manages document title and meta description
* - Preserves original values for cleanup
*
* 3. Content Sections:
* - Icon: Optional, maintains aspect ratio
* - Main Content: Type, title, subtitle, description
* - Metadata: Right-aligned or stacked key-value pairs
* - CTA Button: Optional button link to external site
*
* 4. Styling:
* - Background image support with overlay
* - Consistent spacing using MUI theme
* - Responsive typography
* - Optional left-nav alignment
*/
declare const HeaderCardV2: React.ForwardRefExoticComponent<HeaderCardV2Props & React.RefAttributes<HTMLDivElement>>;
export default HeaderCardV2;
//# sourceMappingURL=HeaderCardV2.d.ts.map