Skip to content

Commit 5dbccfb

Browse files
aeksandlaaeksandla
committed
feat(Header): update memory bank
1 parent 9dda6f6 commit 5dbccfb

File tree

5 files changed

+319
-12
lines changed

5 files changed

+319
-12
lines changed

‎memory-bank/activeContext.md

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,28 @@ The Page Constructor library is currently focused on providing a comprehensive s
1313

1414
Recent development has focused on:
1515

16-
1. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns:
16+
1. **HeaderBlock Enhancements**: Significant updates to HeaderBlock with new functionality:
17+
18+
- **New Content Properties**: Added `additionalInfo`, `overtitle`, and `status` for richer content structure
19+
- **Custom Rendering**: Added `renderTitle` function prop for custom title rendering
20+
- **Enhanced Background Support**: New `fullWidthMedia` property for full-width media backgrounds
21+
- **Improved Media Control**: Added `mediaView` and `mediaClassName` for better media customization
22+
- **Accessibility Improvements**: Enhanced ARIA support with `useUniqId()` and proper labeling
23+
- **Context Integration**: Better integration with `useWindowWidth` and responsive breakpoints
24+
- **Component Architecture**: Refactored background rendering into separate `Background` and `FullWidthBackground` components
25+
26+
2. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns:
1727

1828
- Standardized `controlPosition` prop for flexible control placement ('content' vs 'footer')
1929
- Enhanced accessibility with `useUniqId()` for proper ARIA labeling
2030
- Consistent size defaults (size='s') across all card components
2131
- Unified theme support using `getThemedValue` utility
2232
- Improved integration with the Content sub-block
2333

24-
2. **Accessibility Improvements**: Enhanced ARIA attributes and ID management across card components
25-
3. **Control Positioning**: New flexible control positioning system allowing buttons/links in footer area
26-
4. **Performance Optimization**: Reducing bundle size and improving rendering performance
27-
5. **Documentation**: Expanding Storybook examples and documentation
34+
3. **Accessibility Improvements**: Enhanced ARIA attributes and ID management across components
35+
4. **Control Positioning**: New flexible control positioning system allowing buttons/links in footer area
36+
5. **Performance Optimization**: Reducing bundle size and improving rendering performance
37+
6. **Documentation**: Expanding Storybook examples and documentation
2838

2939
## Active Decisions and Considerations
3040

@@ -33,6 +43,8 @@ Recent development has focused on:
3343
- **Component Structure**: The library follows a hierarchical component structure with blocks, sub-blocks, and base components
3444
- **Context Providers**: Multiple context providers manage different aspects of the application (theme, mobile detection, analytics, etc.)
3545
- **Type System**: A comprehensive TypeScript type system ensures type safety and developer experience
46+
- **Responsive Design**: Enhanced integration with window width context and breakpoint constants for better mobile adaptation
47+
- **Component Composition**: Complex blocks like HeaderBlock use internal component composition (Background, FullWidthBackground) for better maintainability
3648

3749
### Block System
3850

@@ -94,10 +106,19 @@ The following areas are being considered for future development:
94106

95107
### Recent Achievements
96108

97-
1. **Accessibility Enhancement**: Improved ARIA support across card components with proper ID management
98-
2. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control
99-
3. **Theme Integration**: Consistent theme support using `getThemedValue` utility
100-
4. **Component Consistency**: Standardized patterns across card components improve maintainability
109+
1. **HeaderBlock Enhancement**: Significant improvements to HeaderBlock functionality:
110+
111+
- Added rich content structure with `overtitle`, `additionalInfo`, and `status` support
112+
- Implemented custom title rendering with `renderTitle` function prop
113+
- Enhanced background support with `fullWidthMedia` property
114+
- Improved media control with `mediaView` and `mediaClassName` props
115+
- Better responsive design integration with `useWindowWidth` hook
116+
- Refactored component architecture with separate Background components
117+
118+
2. **Accessibility Enhancement**: Improved ARIA support across components with proper ID management
119+
3. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control
120+
4. **Theme Integration**: Consistent theme support using `getThemedValue` utility
121+
5. **Component Consistency**: Standardized patterns across card components improve maintainability
101122

102123
### Documentation Updates
103124

‎memory-bank/progress.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,24 @@ The Page Constructor library is a mature and stable project that provides a comp
1919

2020
The library includes a comprehensive set of blocks for various use cases:
2121

22-
- **Layout Blocks**: Header, ContentLayout, CardLayout
22+
- **Layout Blocks**: Header (with enhanced features), ContentLayout, CardLayout
2323
- **Content Blocks**: Media, Banner, Info, Table, Tabs
2424
- **Interactive Blocks**: Slider, Questions, FoldableList, Form
2525
- **Feature Blocks**: PromoFeatures, ExtendedFeatures, Icons
2626
- **Integration Blocks**: Map, Share, Companies
2727

28+
#### HeaderBlock Enhanced Features
29+
30+
The HeaderBlock has been significantly enhanced with new capabilities:
31+
32+
- **Rich Content Structure**: Support for `overtitle`, `additionalInfo`, and `status` elements
33+
- **Custom Rendering**: `renderTitle` function prop for custom title rendering
34+
- **Advanced Background Support**: `fullWidthMedia` property for full-width media backgrounds
35+
- **Media Customization**: `mediaView` and `mediaClassName` props for better media control
36+
- **Responsive Design**: Integration with `useWindowWidth` hook and responsive breakpoints
37+
- **Component Architecture**: Refactored with separate `Background` and `FullWidthBackground` components
38+
- **Enhanced Accessibility**: Improved ARIA support with proper ID management and labeling
39+
2840
### Sub-block Components
2941

3042
Recently updated sub-block components with enhanced consistency:

‎memory-bank/systemPatterns.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,40 @@ Blocks are composed of smaller components and sub-blocks:
7474
└───────────────────────────────┘
7575
```
7676

77+
### HeaderBlock Architecture
78+
79+
HeaderBlock follows an enhanced architectural pattern with component composition:
80+
81+
```
82+
┌─────────────────────────────────────┐
83+
│ HeaderBlock │
84+
├─────────────────────────────────────┤
85+
│ • useUniqId() for accessibility │
86+
│ • useWindowWidth() for responsive │
87+
│ • Theme support via getThemedValue │
88+
│ • Component composition pattern │
89+
├─────────────────────────────────────┤
90+
│ Background Components │
91+
│ • Background (media backgrounds) │
92+
│ • FullWidthBackground (full width) │
93+
├─────────────────────────────────────┤
94+
│ Content Structure │
95+
│ • overtitle (above title) │
96+
│ • title with custom rendering │
97+
│ • description and additionalInfo │
98+
│ • status element support │
99+
│ • buttons with ARIA labeling │
100+
└─────────────────────────────────────┘
101+
```
102+
103+
Key HeaderBlock patterns:
104+
105+
- **Component Composition**: Separate Background and FullWidthBackground components
106+
- **Enhanced Content**: Support for overtitle, additionalInfo, status, and custom title rendering
107+
- **Responsive Integration**: useWindowWidth hook and BREAKPOINTS constants
108+
- **Media Flexibility**: mediaView and mediaClassName for customization
109+
- **Accessibility**: Proper ARIA labeling with titleId for button descriptions
110+
77111
### Card Component Architecture
78112

79113
Card components follow a consistent architectural pattern:

‎memory-bank/techContext.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@
6060
- **Sub-blocks**: Components used within blocks (Cards, Quotes, etc.)
6161
- **Components**: Basic UI elements (Button, Link, Image, etc.)
6262
- **Grid**: Responsive layout system
63-
- **Context**: React context providers for various features
64-
- **Utils**: Utility functions and helpers
63+
- **Context**: React context providers for various features (including WindowWidthContext for responsive design)
64+
- **Utils**: Utility functions and helpers (including responsive breakpoint constants)
6565

6666
### Server-Side
6767

@@ -81,6 +81,16 @@
8181
- **iframe**: Isolated environment for rendering pages
8282
- **Messaging**: Communication between editor and preview
8383

84+
## Recent Technical Enhancements
85+
86+
### HeaderBlock Technical Improvements
87+
88+
- **Responsive Design Integration**: Enhanced use of `useWindowWidth` hook and `BREAKPOINTS` constants for better mobile adaptation
89+
- **Component Composition**: Refactored background rendering into separate `Background` and `FullWidthBackground` components for better maintainability
90+
- **Accessibility Enhancement**: Improved ARIA support with `useUniqId()` hook for proper ID management and labeling
91+
- **Media Integration**: Enhanced microdata support for video content with `mergeVideoMicrodata` utility
92+
- **Type Safety**: Extended TypeScript interfaces with new properties (`additionalInfo`, `overtitle`, `status`, `renderTitle`, `mediaView`, `mediaClassName`)
93+
8494
## Technical Constraints
8595

8696
1. **Browser Compatibility**:

‎memory-bank/usage/headerBlock.md

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
# HeaderBlock Usage Documentation
2+
3+
## Overview
4+
5+
HeaderBlock is a versatile layout block that serves as the main header section of a page. It has been significantly enhanced with new content structure options, improved accessibility, and better responsive design integration.
6+
7+
## Enhanced Properties
8+
9+
### Content Structure
10+
11+
#### `overtitle`
12+
13+
- **Type**: `string | JSX.Element`
14+
- **Description**: Text or JSX element displayed above the main title
15+
- **Usage**: For category labels, breadcrumb-like navigation, or contextual information
16+
17+
```json
18+
{
19+
"type": "header-block",
20+
"overtitle": "Product Category",
21+
"title": "Main Product Title"
22+
}
23+
```
24+
25+
#### `additionalInfo`
26+
27+
- **Type**: `string`
28+
- **Description**: Additional information displayed after the description
29+
- **Content Type**: YFM (Yandex Flavored Markdown)
30+
- **Usage**: For supplementary details, disclaimers, or extended descriptions
31+
32+
```json
33+
{
34+
"type": "header-block",
35+
"title": "Product Title",
36+
"description": "Main product description",
37+
"additionalInfo": "**Note**: Additional details about the product"
38+
}
39+
```
40+
41+
#### `status`
42+
43+
- **Type**: `JSX.Element`
44+
- **Description**: Status element displayed next to the title
45+
- **Usage**: For badges, labels, or status indicators
46+
47+
### Custom Rendering
48+
49+
#### `renderTitle`
50+
51+
- **Type**: `(title: string) => React.ReactNode`
52+
- **Description**: Function for custom title rendering
53+
- **Usage**: When you need custom title formatting or additional elements within the title
54+
55+
### Media Enhancements
56+
57+
#### `mediaView`
58+
59+
- **Type**: `'full' | 'fit'`
60+
- **Default**: `'full'`
61+
- **Description**: Controls how media content is displayed
62+
- **Usage**:
63+
- `'full'`: Media fills the available space
64+
- `'fit'`: Media maintains aspect ratio within bounds
65+
66+
#### `mediaClassName`
67+
68+
- **Type**: `string`
69+
- **Description**: Additional CSS class for media elements
70+
- **Usage**: For custom styling of media content
71+
72+
### Background Enhancements
73+
74+
#### `fullWidthMedia`
75+
76+
- **Type**: `boolean`
77+
- **Description**: Allows media backgrounds to extend to full viewport width
78+
- **Usage**: For immersive background experiences
79+
80+
```json
81+
{
82+
"type": "header-block",
83+
"title": "Immersive Header",
84+
"background": {
85+
"image": "background.jpg",
86+
"fullWidthMedia": true
87+
}
88+
}
89+
```
90+
91+
## Technical Implementation
92+
93+
### Component Architecture
94+
95+
The HeaderBlock now uses a component composition pattern:
96+
97+
```
98+
HeaderBlock
99+
├── Background (for media backgrounds)
100+
├── FullWidthBackground (for full-width backgrounds)
101+
└── Content Structure
102+
├── overtitle
103+
├── title (with custom rendering support)
104+
├── description
105+
├── additionalInfo
106+
└── buttons
107+
```
108+
109+
### Responsive Design
110+
111+
- **WindowWidth Integration**: Uses `useWindowWidth` hook for responsive behavior
112+
- **Breakpoint Constants**: Leverages `BREAKPOINTS` constants for consistent responsive design
113+
- **Mobile Adaptation**: Enhanced mobile experience with conditional media rendering
114+
115+
### Accessibility Features
116+
117+
- **Unique IDs**: Uses `useUniqId()` hook for proper ARIA labeling
118+
- **ARIA Relationships**: Buttons are properly associated with titles using `aria-describedby`
119+
- **Screen Reader Support**: Improved content structure for better screen reader navigation
120+
121+
### Background Components
122+
123+
#### Background Component
124+
125+
- Handles media backgrounds with video and image support
126+
- Mobile-responsive media rendering
127+
- Parallax support (disabled by default)
128+
129+
#### FullWidthBackground Component
130+
131+
- Renders full-width background colors
132+
- Used when `fullWidth` or `fullWidthMedia` is enabled
133+
134+
## Usage Examples
135+
136+
### Basic Enhanced Header
137+
138+
```json
139+
{
140+
"type": "header-block",
141+
"overtitle": "New Release",
142+
"title": "Product Launch 2024",
143+
"description": "Introducing our latest innovation",
144+
"additionalInfo": "Available in **limited quantities**",
145+
"buttons": [
146+
{
147+
"text": "Learn More",
148+
"url": "/product",
149+
"theme": "action"
150+
}
151+
]
152+
}
153+
```
154+
155+
### Header with Full-Width Media Background
156+
157+
```json
158+
{
159+
"type": "header-block",
160+
"title": "Immersive Experience",
161+
"description": "Full-width background showcase",
162+
"background": {
163+
"image": {
164+
"src": "hero-background.jpg",
165+
"alt": "Hero background"
166+
},
167+
"fullWidthMedia": true,
168+
"color": "#1a1a1a"
169+
},
170+
"theme": "dark"
171+
}
172+
```
173+
174+
### Header with Custom Media View
175+
176+
```json
177+
{
178+
"type": "header-block",
179+
"title": "Product Showcase",
180+
"description": "Featured product display",
181+
"image": {
182+
"src": "product-image.jpg",
183+
"alt": "Product showcase"
184+
},
185+
"mediaView": "fit",
186+
"mediaClassName": "custom-media-style"
187+
}
188+
```
189+
190+
## Migration Notes
191+
192+
### New Properties
193+
194+
- All new properties are optional and backward compatible
195+
- Existing HeaderBlock configurations will continue to work unchanged
196+
197+
### Enhanced Features
198+
199+
- Improved accessibility is automatically applied
200+
- Responsive design enhancements are enabled by default
201+
- Background rendering improvements are transparent to existing usage
202+
203+
### Deprecated Properties
204+
205+
- Some legacy properties may be deprecated in future versions
206+
- Check the schema for current property status
207+
208+
## Best Practices
209+
210+
1. **Content Hierarchy**: Use `overtitle` for contextual information, `title` for main heading, `description` for primary details, and `additionalInfo` for supplementary content
211+
212+
2. **Accessibility**: Always provide meaningful `alt` text for images and ensure proper content structure
213+
214+
3. **Responsive Design**: Test headers across different screen sizes, especially when using custom media configurations
215+
216+
4. **Performance**: Use appropriate image sizes and formats for background media
217+
218+
5. **Theme Consistency**: Ensure theme settings work well with background colors and media content
219+
220+
## Schema Reference
221+
222+
The HeaderBlock schema includes all enhanced properties with proper validation:
223+
224+
- `overtitle`: String or JSX content type
225+
- `additionalInfo`: YFM content with textarea input
226+
- `mediaView`: Enum with 'full' and 'fit' options
227+
- `fullWidthMedia`: Boolean for background configuration
228+
- `renderTitle`: Function prop (not in schema, runtime only)
229+
- `status`: JSX element (not in schema, runtime only)
230+
- `mediaClassName`: String for custom styling

0 commit comments

Comments
 (0)