New Component Proposal - Cheader

[rayyan-innovation]

Cheader Component

Component Overview

A customizable header component that supports multiple text variants with truncation capabilities. The component is designed to display text content with optional star notation and different typography styles.

Features

• Multiple typography variants support (h1-h6, paragraph)
• Text truncation with customizable length
• Optional star notation (*)
• Responsive design with Material-UI integration
• Customizable theming support
• Mobile-responsive text sizing

Props

• Paratext: String - Text content when HeadingText is true

• value: String - Text content when HeadingText is false

• HeadingText: Boolean - Toggle between paragraph and heading display

• variant: String - Typography variant ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'paragraph')

• isStar: Boolean - Toggle star notation display

Theme Customization

The component includes a comprehensive theming system with:

• Color palette configuration
• Spacing system
• Border radius utilities
• Light/Dark mode support

Usage Example

<InnovationTeamComponentLibCheader
  Paratext="Sample Header"
  variant="h1"
  HeadingText={true}
  isStar={false}
/>

Technical Requirements

• React 16.8+
• Material-UI Core
• @pega/cosmos-react-core
• TypeScript support

Implementation Notes

• Text truncation is set to 35 characters for heading variants
• Default text truncation is 14 characters
• Mobile breakpoint adjusts font size to 0.7rem
• Default text alignment is centered for headers

Future Enhancements

1. Add dark mode theme support
2. Implement custom truncation length prop
3. Add more typography variants
4. Include tooltip for truncated text
5. Add animation options for text display

Dependencies

• @material-ui/core
• @pega/cosmos-react-core
• React
• TypeScript

Attachments

Cheader.zip

[ricmars]

Suggestion for new component is rejected: this component does not promote best practices - h1 are coming from the page view and should not be dropped within a component - also this component is using material UI and does not follow best practices. Finally the name of the component is not aligned with the best practices

[rayyan-innovation]

Hello @ricmars ,
I have updated the attachment to follow the best practices guidance. Please re-review

[ricmars]

This component is not promoted into the repo - dropping text into a form is not a best practice - text should be shown in relation to a field exposed in the form - in this case, use helperText - Also you should not use this component for a label or indicate a required field - * does not mean it is required -