Skip to content

Commit aa3e9d3

Browse files
aeksandlaaeksandla
authored
feat(Header): add props for elements className (#1238)
1 parent 1e149e4 commit aa3e9d3

File tree

6 files changed

+447
-20
lines changed

6 files changed

+447
-20
lines changed

‎memory-bank/activeContext.md‎

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

1414
Recent development has focused on:
1515

16-
1. **Text Size Enhancement**: Updated `textSize` constant in `src/schema/validators/common.ts`:
17-
18-
- **Previous values**: `['s', 'm', 'l']`
19-
- **Current values**: `['xs', 's', 'sm', 'm', 'l']`
20-
- Added new smaller sizes: `'xs'` (extra small) and `'sm'` (small-medium)
21-
- This affects all components that use text sizing: Links, FileLinkProps, TitleProps, and various blocks
22-
- Updated TypeScript type `TextSize` to include new values
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+
- **Layout Customization**: Added `contentWrapperClassName` for custom styling of the content-wrapper element
23+
- **Content Inner Customization**: Added `contentInnerClassName` for custom styling of the content-inner element
24+
- **Accessibility Improvements**: Enhanced ARIA support with `useUniqId()` and proper labeling
25+
- **Context Integration**: Better integration with `useWindowWidth` and responsive breakpoints
26+
- **Component Architecture**: Refactored background rendering into separate `Background` and `FullWidthBackground` components
27+
- **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better clarity
2328

2429
2. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns:
2530

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

4552
### Block System
4653

@@ -102,10 +109,15 @@ The following areas are being considered for future development:
102109

103110
### Recent Achievements
104111

105-
1. **Accessibility Enhancement**: Improved ARIA support across card components with proper ID management
106-
2. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control
107-
3. **Theme Integration**: Consistent theme support using `getThemedValue` utility
108-
4. **Component Consistency**: Standardized patterns across card components improve maintainability
112+
1. **HeaderBlock Enhancement**: Significant improvements to HeaderBlock functionality:
113+
114+
- Improved media control with `mediaClassName` props
115+
- Added layout customization with `contentWrapperClassName` prop
116+
117+
2. **Accessibility Enhancement**: Improved ARIA support across components with proper ID management
118+
3. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control
119+
4. **Theme Integration**: Consistent theme support using `getThemedValue` utility
120+
5. **Component Consistency**: Standardized patterns across card components improve maintainability
109121

110122
### Documentation Updates
111123

‎memory-bank/progress.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Current Status
44

5-
The Page Constructor library is a mature and stable project that provides a comprehensive solution for building web pages using a component-based approach. It is currently at version 6.8.1 and follows semantic versioning for releases.
5+
The Page Constructor library is a mature and stable project that provides a comprehensive solution for building web pages using a component-based approach. It is currently at version 7.6.2 and follows semantic versioning for releases.
66

77
## What Works
88

@@ -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+
- **Media Customization**: `mediaView` and `mediaClassName` props for better media control
33+
- **Layout Customization**: Multiple className props for fine-grained styling control:
34+
- `gridClassName` for Grid component styling
35+
- `contentWrapperClassName` for content wrapper styling
36+
- `contentInnerClassName` for content inner element styling
37+
- `mediaClassName` for media element styling
38+
- **Props Evolution**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better clarity
39+
2840
### Sub-block Components
2941

3042
Recently updated sub-block components with enhanced consistency:

‎memory-bank/systemPatterns.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,47 @@ 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+
│ Layout Customization │
102+
│ • gridClassName for Grid styling │
103+
│ • contentWrapperClassName │
104+
│ • contentInnerClassName │
105+
│ • mediaClassName for media styling │
106+
└─────────────────────────────────────┘
107+
```
108+
109+
Key HeaderBlock patterns:
110+
111+
- **Component Composition**: Separate Background and FullWidthBackground components
112+
- **Enhanced Content**: Support for overtitle, additionalInfo, status, and custom title rendering
113+
- **Responsive Integration**: useWindowWidth hook and BREAKPOINTS constants
114+
- **Media Flexibility**: mediaView and mediaClassName for customization
115+
- **Layout Customization**: Multiple className props for fine-grained styling control
116+
- **Accessibility**: Proper ARIA labeling with titleId for button descriptions
117+
77118
### Card Component Architecture
78119

79120
Card components follow a consistent architectural pattern:

‎memory-bank/techContext.md‎

Lines changed: 14 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,18 @@
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+
- **Type Safety**: Extended TypeScript interfaces with new properties:
89+
- `mediaClassName` for media element styling
90+
- `gridClassName` for Grid component styling
91+
- `contentWrapperClassName` for content wrapper styling
92+
- `contentInnerClassName` for content inner element styling
93+
- **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better semantic clarity
94+
- **Enhanced Layout Control**: Multiple className props provide fine-grained styling control over different HeaderBlock elements
95+
8496
## Technical Constraints
8597

8698
1. **Browser Compatibility**:

0 commit comments

Comments
 (0)