From f4905c4dc53aefce0adc33a22672387f0415d7b0 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Mon, 14 Jul 2025 15:58:00 +0300 Subject: [PATCH 1/8] feat(Header): add props for elements className --- src/blocks/Header/Header.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx index d2b5fd225..ed66ee6a2 100644 --- a/src/blocks/Header/Header.tsx +++ b/src/blocks/Header/Header.tsx @@ -19,7 +19,12 @@ import {BREAKPOINTS} from '../../constants'; const b = block('header-block'); -export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps; +type ElementsClassName = { + gridClassName?: string; + mediaClassName?: string; +}; + +export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName; interface BackgroundProps { background: HeaderBlockBackground; @@ -78,6 +83,7 @@ export const HeaderBlock = (props: React.PropsWithChildren theme: textTheme = 'light', verticalOffset = 'm', className, + gridClassName, breadcrumbs, status, renderTitle, @@ -85,6 +91,7 @@ export const HeaderBlock = (props: React.PropsWithChildren mediaView = 'full', centered, additionalInfo, + mediaClassName, } = props; const windowWidth = useWindowWidth(); const isMobile = windowWidth <= BREAKPOINTS.sm; @@ -122,7 +129,7 @@ export const HeaderBlock = (props: React.PropsWithChildren > {backgroundThemed && fullWidth && } {backgroundThemed && } - + {breadcrumbs && ( @@ -212,7 +219,7 @@ export const HeaderBlock = (props: React.PropsWithChildren {hasRightSideImage && ( Date: Mon, 14 Jul 2025 16:23:09 +0300 Subject: [PATCH 2/8] feat(Header): update memory bank --- memory-bank/activeContext.md | 33 +++-- memory-bank/progress.md | 14 +- memory-bank/systemPatterns.md | 34 +++++ memory-bank/techContext.md | 14 +- memory-bank/usage/headerBlock.md | 230 +++++++++++++++++++++++++++++++ 5 files changed, 312 insertions(+), 13 deletions(-) create mode 100644 memory-bank/usage/headerBlock.md diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index a6e1aee5d..e5bd0cfd9 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -13,13 +13,15 @@ The Page Constructor library is currently focused on providing a comprehensive s Recent development has focused on: -1. **Text Size Enhancement**: Updated `textSize` constant in `src/schema/validators/common.ts`: +1. **HeaderBlock Enhancements**: Significant updates to HeaderBlock with new functionality: - - **Previous values**: `['s', 'm', 'l']` - - **Current values**: `['xs', 's', 'sm', 'm', 'l']` - - Added new smaller sizes: `'xs'` (extra small) and `'sm'` (small-medium) - - This affects all components that use text sizing: Links, FileLinkProps, TitleProps, and various blocks - - Updated TypeScript type `TextSize` to include new values + - **New Content Properties**: Added `additionalInfo`, `overtitle`, and `status` for richer content structure + - **Custom Rendering**: Added `renderTitle` function prop for custom title rendering + - **Enhanced Background Support**: New `fullWidthMedia` property for full-width media backgrounds + - **Improved Media Control**: Added `mediaView` and `mediaClassName` for better media customization + - **Accessibility Improvements**: Enhanced ARIA support with `useUniqId()` and proper labeling + - **Context Integration**: Better integration with `useWindowWidth` and responsive breakpoints + - **Component Architecture**: Refactored background rendering into separate `Background` and `FullWidthBackground` components 2. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns: @@ -41,6 +43,8 @@ Recent development has focused on: - **Component Structure**: The library follows a hierarchical component structure with blocks, sub-blocks, and base components - **Context Providers**: Multiple context providers manage different aspects of the application (theme, mobile detection, analytics, etc.) - **Type System**: A comprehensive TypeScript type system ensures type safety and developer experience +- **Responsive Design**: Enhanced integration with window width context and breakpoint constants for better mobile adaptation +- **Component Composition**: Complex blocks like HeaderBlock use internal component composition (Background, FullWidthBackground) for better maintainability ### Block System @@ -102,10 +106,19 @@ The following areas are being considered for future development: ### Recent Achievements -1. **Accessibility Enhancement**: Improved ARIA support across card components with proper ID management -2. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control -3. **Theme Integration**: Consistent theme support using `getThemedValue` utility -4. **Component Consistency**: Standardized patterns across card components improve maintainability +1. **HeaderBlock Enhancement**: Significant improvements to HeaderBlock functionality: + + - Added rich content structure with `overtitle`, `additionalInfo`, and `status` support + - Implemented custom title rendering with `renderTitle` function prop + - Enhanced background support with `fullWidthMedia` property + - Improved media control with `mediaView` and `mediaClassName` props + - Better responsive design integration with `useWindowWidth` hook + - Refactored component architecture with separate Background components + +2. **Accessibility Enhancement**: Improved ARIA support across components with proper ID management +3. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control +4. **Theme Integration**: Consistent theme support using `getThemedValue` utility +5. **Component Consistency**: Standardized patterns across card components improve maintainability ### Documentation Updates diff --git a/memory-bank/progress.md b/memory-bank/progress.md index 86260fa37..ed40b6048 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -19,12 +19,24 @@ The Page Constructor library is a mature and stable project that provides a comp The library includes a comprehensive set of blocks for various use cases: -- **Layout Blocks**: Header, ContentLayout, CardLayout +- **Layout Blocks**: Header (with enhanced features), ContentLayout, CardLayout - **Content Blocks**: Media, Banner, Info, Table, Tabs - **Interactive Blocks**: Slider, Questions, FoldableList, Form - **Feature Blocks**: PromoFeatures, ExtendedFeatures, Icons - **Integration Blocks**: Map, Share, Companies +#### HeaderBlock Enhanced Features + +The HeaderBlock has been significantly enhanced with new capabilities: + +- **Rich Content Structure**: Support for `overtitle`, `additionalInfo`, and `status` elements +- **Custom Rendering**: `renderTitle` function prop for custom title rendering +- **Advanced Background Support**: `fullWidthMedia` property for full-width media backgrounds +- **Media Customization**: `mediaView` and `mediaClassName` props for better media control +- **Responsive Design**: Integration with `useWindowWidth` hook and responsive breakpoints +- **Component Architecture**: Refactored with separate `Background` and `FullWidthBackground` components +- **Enhanced Accessibility**: Improved ARIA support with proper ID management and labeling + ### Sub-block Components Recently updated sub-block components with enhanced consistency: diff --git a/memory-bank/systemPatterns.md b/memory-bank/systemPatterns.md index 8ad1eaa37..5e7c6aae1 100644 --- a/memory-bank/systemPatterns.md +++ b/memory-bank/systemPatterns.md @@ -74,6 +74,40 @@ Blocks are composed of smaller components and sub-blocks: └───────────────────────────────┘ ``` +### HeaderBlock Architecture + +HeaderBlock follows an enhanced architectural pattern with component composition: + +``` +┌─────────────────────────────────────┐ +│ HeaderBlock │ +├─────────────────────────────────────┤ +│ • useUniqId() for accessibility │ +│ • useWindowWidth() for responsive │ +│ • Theme support via getThemedValue │ +│ • Component composition pattern │ +├─────────────────────────────────────┤ +│ Background Components │ +│ • Background (media backgrounds) │ +│ • FullWidthBackground (full width) │ +├─────────────────────────────────────┤ +│ Content Structure │ +│ • overtitle (above title) │ +│ • title with custom rendering │ +│ • description and additionalInfo │ +│ • status element support │ +│ • buttons with ARIA labeling │ +└─────────────────────────────────────┘ +``` + +Key HeaderBlock patterns: + +- **Component Composition**: Separate Background and FullWidthBackground components +- **Enhanced Content**: Support for overtitle, additionalInfo, status, and custom title rendering +- **Responsive Integration**: useWindowWidth hook and BREAKPOINTS constants +- **Media Flexibility**: mediaView and mediaClassName for customization +- **Accessibility**: Proper ARIA labeling with titleId for button descriptions + ### Card Component Architecture Card components follow a consistent architectural pattern: diff --git a/memory-bank/techContext.md b/memory-bank/techContext.md index 596f84bdb..d2afc584c 100644 --- a/memory-bank/techContext.md +++ b/memory-bank/techContext.md @@ -60,8 +60,8 @@ - **Sub-blocks**: Components used within blocks (Cards, Quotes, etc.) - **Components**: Basic UI elements (Button, Link, Image, etc.) - **Grid**: Responsive layout system -- **Context**: React context providers for various features -- **Utils**: Utility functions and helpers +- **Context**: React context providers for various features (including WindowWidthContext for responsive design) +- **Utils**: Utility functions and helpers (including responsive breakpoint constants) ### Server-Side @@ -81,6 +81,16 @@ - **iframe**: Isolated environment for rendering pages - **Messaging**: Communication between editor and preview +## Recent Technical Enhancements + +### HeaderBlock Technical Improvements + +- **Responsive Design Integration**: Enhanced use of `useWindowWidth` hook and `BREAKPOINTS` constants for better mobile adaptation +- **Component Composition**: Refactored background rendering into separate `Background` and `FullWidthBackground` components for better maintainability +- **Accessibility Enhancement**: Improved ARIA support with `useUniqId()` hook for proper ID management and labeling +- **Media Integration**: Enhanced microdata support for video content with `mergeVideoMicrodata` utility +- **Type Safety**: Extended TypeScript interfaces with new properties (`additionalInfo`, `overtitle`, `status`, `renderTitle`, `mediaView`, `mediaClassName`) + ## Technical Constraints 1. **Browser Compatibility**: diff --git a/memory-bank/usage/headerBlock.md b/memory-bank/usage/headerBlock.md new file mode 100644 index 000000000..bd7244cc0 --- /dev/null +++ b/memory-bank/usage/headerBlock.md @@ -0,0 +1,230 @@ +# HeaderBlock Usage Documentation + +## Overview + +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. + +## Enhanced Properties + +### Content Structure + +#### `overtitle` + +- **Type**: `string | JSX.Element` +- **Description**: Text or JSX element displayed above the main title +- **Usage**: For category labels, breadcrumb-like navigation, or contextual information + +```json +{ + "type": "header-block", + "overtitle": "Product Category", + "title": "Main Product Title" +} +``` + +#### `additionalInfo` + +- **Type**: `string` +- **Description**: Additional information displayed after the description +- **Content Type**: YFM (Yandex Flavored Markdown) +- **Usage**: For supplementary details, disclaimers, or extended descriptions + +```json +{ + "type": "header-block", + "title": "Product Title", + "description": "Main product description", + "additionalInfo": "**Note**: Additional details about the product" +} +``` + +#### `status` + +- **Type**: `JSX.Element` +- **Description**: Status element displayed next to the title +- **Usage**: For badges, labels, or status indicators + +### Custom Rendering + +#### `renderTitle` + +- **Type**: `(title: string) => React.ReactNode` +- **Description**: Function for custom title rendering +- **Usage**: When you need custom title formatting or additional elements within the title + +### Media Enhancements + +#### `mediaView` + +- **Type**: `'full' | 'fit'` +- **Default**: `'full'` +- **Description**: Controls how media content is displayed +- **Usage**: + - `'full'`: Media fills the available space + - `'fit'`: Media maintains aspect ratio within bounds + +#### `mediaClassName` + +- **Type**: `string` +- **Description**: Additional CSS class for media elements +- **Usage**: For custom styling of media content + +### Background Enhancements + +#### `fullWidthMedia` + +- **Type**: `boolean` +- **Description**: Allows media backgrounds to extend to full viewport width +- **Usage**: For immersive background experiences + +```json +{ + "type": "header-block", + "title": "Immersive Header", + "background": { + "image": "background.jpg", + "fullWidthMedia": true + } +} +``` + +## Technical Implementation + +### Component Architecture + +The HeaderBlock now uses a component composition pattern: + +``` +HeaderBlock +├── Background (for media backgrounds) +├── FullWidthBackground (for full-width backgrounds) +└── Content Structure + ├── overtitle + ├── title (with custom rendering support) + ├── description + ├── additionalInfo + └── buttons +``` + +### Responsive Design + +- **WindowWidth Integration**: Uses `useWindowWidth` hook for responsive behavior +- **Breakpoint Constants**: Leverages `BREAKPOINTS` constants for consistent responsive design +- **Mobile Adaptation**: Enhanced mobile experience with conditional media rendering + +### Accessibility Features + +- **Unique IDs**: Uses `useUniqId()` hook for proper ARIA labeling +- **ARIA Relationships**: Buttons are properly associated with titles using `aria-describedby` +- **Screen Reader Support**: Improved content structure for better screen reader navigation + +### Background Components + +#### Background Component + +- Handles media backgrounds with video and image support +- Mobile-responsive media rendering +- Parallax support (disabled by default) + +#### FullWidthBackground Component + +- Renders full-width background colors +- Used when `fullWidth` or `fullWidthMedia` is enabled + +## Usage Examples + +### Basic Enhanced Header + +```json +{ + "type": "header-block", + "overtitle": "New Release", + "title": "Product Launch 2024", + "description": "Introducing our latest innovation", + "additionalInfo": "Available in **limited quantities**", + "buttons": [ + { + "text": "Learn More", + "url": "/product", + "theme": "action" + } + ] +} +``` + +### Header with Full-Width Media Background + +```json +{ + "type": "header-block", + "title": "Immersive Experience", + "description": "Full-width background showcase", + "background": { + "image": { + "src": "hero-background.jpg", + "alt": "Hero background" + }, + "fullWidthMedia": true, + "color": "#1a1a1a" + }, + "theme": "dark" +} +``` + +### Header with Custom Media View + +```json +{ + "type": "header-block", + "title": "Product Showcase", + "description": "Featured product display", + "image": { + "src": "product-image.jpg", + "alt": "Product showcase" + }, + "mediaView": "fit", + "mediaClassName": "custom-media-style" +} +``` + +## Migration Notes + +### New Properties + +- All new properties are optional and backward compatible +- Existing HeaderBlock configurations will continue to work unchanged + +### Enhanced Features + +- Improved accessibility is automatically applied +- Responsive design enhancements are enabled by default +- Background rendering improvements are transparent to existing usage + +### Deprecated Properties + +- Some legacy properties may be deprecated in future versions +- Check the schema for current property status + +## Best Practices + +1. **Content Hierarchy**: Use `overtitle` for contextual information, `title` for main heading, `description` for primary details, and `additionalInfo` for supplementary content + +2. **Accessibility**: Always provide meaningful `alt` text for images and ensure proper content structure + +3. **Responsive Design**: Test headers across different screen sizes, especially when using custom media configurations + +4. **Performance**: Use appropriate image sizes and formats for background media + +5. **Theme Consistency**: Ensure theme settings work well with background colors and media content + +## Schema Reference + +The HeaderBlock schema includes all enhanced properties with proper validation: + +- `overtitle`: String or JSX content type +- `additionalInfo`: YFM content with textarea input +- `mediaView`: Enum with 'full' and 'fit' options +- `fullWidthMedia`: Boolean for background configuration +- `renderTitle`: Function prop (not in schema, runtime only) +- `status`: JSX element (not in schema, runtime only) +- `mediaClassName`: String for custom styling From b07dd0c249b9f91f287608b36362e26dd9e4951a Mon Sep 17 00:00:00 2001 From: aeksandla Date: Tue, 15 Jul 2025 11:41:48 +0300 Subject: [PATCH 3/8] feat(Header): update memory bank --- memory-bank/activeContext.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index e5bd0cfd9..5e62e1b78 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -108,12 +108,8 @@ The following areas are being considered for future development: 1. **HeaderBlock Enhancement**: Significant improvements to HeaderBlock functionality: - - Added rich content structure with `overtitle`, `additionalInfo`, and `status` support - - Implemented custom title rendering with `renderTitle` function prop - - Enhanced background support with `fullWidthMedia` property - - Improved media control with `mediaView` and `mediaClassName` props - - Better responsive design integration with `useWindowWidth` hook - - Refactored component architecture with separate Background components + - Improved media control with `mediaClassName` prop + - Improved grid control with `gridClassName` prop 2. **Accessibility Enhancement**: Improved ARIA support across components with proper ID management 3. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control From e3485fd5c2326cb5f9360c1e1acdb1179a36fa28 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Tue, 15 Jul 2025 11:44:48 +0300 Subject: [PATCH 4/8] feat(Header): update memory bank --- memory-bank/progress.md | 6 ------ memory-bank/techContext.md | 6 +----- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/memory-bank/progress.md b/memory-bank/progress.md index ed40b6048..d6befe6d0 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -29,13 +29,7 @@ The library includes a comprehensive set of blocks for various use cases: The HeaderBlock has been significantly enhanced with new capabilities: -- **Rich Content Structure**: Support for `overtitle`, `additionalInfo`, and `status` elements -- **Custom Rendering**: `renderTitle` function prop for custom title rendering -- **Advanced Background Support**: `fullWidthMedia` property for full-width media backgrounds - **Media Customization**: `mediaView` and `mediaClassName` props for better media control -- **Responsive Design**: Integration with `useWindowWidth` hook and responsive breakpoints -- **Component Architecture**: Refactored with separate `Background` and `FullWidthBackground` components -- **Enhanced Accessibility**: Improved ARIA support with proper ID management and labeling ### Sub-block Components diff --git a/memory-bank/techContext.md b/memory-bank/techContext.md index d2afc584c..0184440f9 100644 --- a/memory-bank/techContext.md +++ b/memory-bank/techContext.md @@ -85,11 +85,7 @@ ### HeaderBlock Technical Improvements -- **Responsive Design Integration**: Enhanced use of `useWindowWidth` hook and `BREAKPOINTS` constants for better mobile adaptation -- **Component Composition**: Refactored background rendering into separate `Background` and `FullWidthBackground` components for better maintainability -- **Accessibility Enhancement**: Improved ARIA support with `useUniqId()` hook for proper ID management and labeling -- **Media Integration**: Enhanced microdata support for video content with `mergeVideoMicrodata` utility -- **Type Safety**: Extended TypeScript interfaces with new properties (`additionalInfo`, `overtitle`, `status`, `renderTitle`, `mediaView`, `mediaClassName`) +- **Type Safety**: Extended TypeScript interfaces with new properties (`mediaClassName`, `gridClassName`) ## Technical Constraints From 2f9ced44c4f26f5661e2df3a78a3ba3a535cbea7 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Tue, 15 Jul 2025 13:45:41 +0300 Subject: [PATCH 5/8] feat(Header): add new prop --- memory-bank/activeContext.md | 5 +++-- memory-bank/usage/headerBlock.md | 7 +++++++ src/blocks/Header/Header.tsx | 7 ++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index 5e62e1b78..451ae58e3 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -19,6 +19,7 @@ Recent development has focused on: - **Custom Rendering**: Added `renderTitle` function prop for custom title rendering - **Enhanced Background Support**: New `fullWidthMedia` property for full-width media backgrounds - **Improved Media Control**: Added `mediaView` and `mediaClassName` for better media customization + - **Layout Customization**: Added `containerFluidClassName` for custom styling of the container-fluid element - **Accessibility Improvements**: Enhanced ARIA support with `useUniqId()` and proper labeling - **Context Integration**: Better integration with `useWindowWidth` and responsive breakpoints - **Component Architecture**: Refactored background rendering into separate `Background` and `FullWidthBackground` components @@ -108,8 +109,8 @@ The following areas are being considered for future development: 1. **HeaderBlock Enhancement**: Significant improvements to HeaderBlock functionality: - - Improved media control with `mediaClassName` prop - - Improved grid control with `gridClassName` prop + - Improved media control with `mediaClassName` props + - Added layout customization with `containerFluidClassName` prop 2. **Accessibility Enhancement**: Improved ARIA support across components with proper ID management 3. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control diff --git a/memory-bank/usage/headerBlock.md b/memory-bank/usage/headerBlock.md index bd7244cc0..d806166f0 100644 --- a/memory-bank/usage/headerBlock.md +++ b/memory-bank/usage/headerBlock.md @@ -69,6 +69,12 @@ HeaderBlock is a versatile layout block that serves as the main header section o - **Description**: Additional CSS class for media elements - **Usage**: For custom styling of media content +#### `containerFluidClassName` + +- **Type**: `string` +- **Description**: Additional CSS class for the container-fluid element +- **Usage**: For custom styling of the main container that wraps the header content + ### Background Enhancements #### `fullWidthMedia` @@ -228,3 +234,4 @@ The HeaderBlock schema includes all enhanced properties with proper validation: - `renderTitle`: Function prop (not in schema, runtime only) - `status`: JSX element (not in schema, runtime only) - `mediaClassName`: String for custom styling +- `containerFluidClassName`: String for custom styling (not in schema, runtime only) diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx index ed66ee6a2..c265edc6e 100644 --- a/src/blocks/Header/Header.tsx +++ b/src/blocks/Header/Header.tsx @@ -22,6 +22,7 @@ const b = block('header-block'); type ElementsClassName = { gridClassName?: string; mediaClassName?: string; + containerFluidClassName?: string; }; export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName; @@ -92,6 +93,7 @@ export const HeaderBlock = (props: React.PropsWithChildren centered, additionalInfo, mediaClassName, + containerFluidClassName, } = props; const windowWidth = useWindowWidth(); const isMobile = windowWidth <= BREAKPOINTS.sm; @@ -129,7 +131,10 @@ export const HeaderBlock = (props: React.PropsWithChildren > {backgroundThemed && fullWidth && } {backgroundThemed && } - + {breadcrumbs && ( From aa45143173f095053f40953b47f005ef97c66795 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Tue, 15 Jul 2025 14:41:59 +0300 Subject: [PATCH 6/8] feat(Header): add new prop --- memory-bank/activeContext.md | 4 ++-- memory-bank/usage/headerBlock.md | 8 ++++---- src/blocks/Header/Header.tsx | 11 ++++------- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index 451ae58e3..025d0f41d 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -19,7 +19,7 @@ Recent development has focused on: - **Custom Rendering**: Added `renderTitle` function prop for custom title rendering - **Enhanced Background Support**: New `fullWidthMedia` property for full-width media backgrounds - **Improved Media Control**: Added `mediaView` and `mediaClassName` for better media customization - - **Layout Customization**: Added `containerFluidClassName` for custom styling of the container-fluid element + - **Layout Customization**: Added `contentWrapperClassName` for custom styling of the content-wrapper element - **Accessibility Improvements**: Enhanced ARIA support with `useUniqId()` and proper labeling - **Context Integration**: Better integration with `useWindowWidth` and responsive breakpoints - **Component Architecture**: Refactored background rendering into separate `Background` and `FullWidthBackground` components @@ -110,7 +110,7 @@ The following areas are being considered for future development: 1. **HeaderBlock Enhancement**: Significant improvements to HeaderBlock functionality: - Improved media control with `mediaClassName` props - - Added layout customization with `containerFluidClassName` prop + - Added layout customization with `contentWrapperClassName` prop 2. **Accessibility Enhancement**: Improved ARIA support across components with proper ID management 3. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control diff --git a/memory-bank/usage/headerBlock.md b/memory-bank/usage/headerBlock.md index d806166f0..66957909c 100644 --- a/memory-bank/usage/headerBlock.md +++ b/memory-bank/usage/headerBlock.md @@ -69,11 +69,11 @@ HeaderBlock is a versatile layout block that serves as the main header section o - **Description**: Additional CSS class for media elements - **Usage**: For custom styling of media content -#### `containerFluidClassName` +#### `contentWrapperClassName` - **Type**: `string` -- **Description**: Additional CSS class for the container-fluid element -- **Usage**: For custom styling of the main container that wraps the header content +- **Description**: Additional CSS class for the content-wrapper element +- **Usage**: For custom styling of the content wrapper that contains the header layout ### Background Enhancements @@ -234,4 +234,4 @@ The HeaderBlock schema includes all enhanced properties with proper validation: - `renderTitle`: Function prop (not in schema, runtime only) - `status`: JSX element (not in schema, runtime only) - `mediaClassName`: String for custom styling -- `containerFluidClassName`: String for custom styling (not in schema, runtime only) +- `contentWrapperClassName`: String for custom styling (not in schema, runtime only) diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx index c265edc6e..0759c6a56 100644 --- a/src/blocks/Header/Header.tsx +++ b/src/blocks/Header/Header.tsx @@ -22,7 +22,7 @@ const b = block('header-block'); type ElementsClassName = { gridClassName?: string; mediaClassName?: string; - containerFluidClassName?: string; + contentWrapperClassName?: string; }; export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName; @@ -93,7 +93,7 @@ export const HeaderBlock = (props: React.PropsWithChildren centered, additionalInfo, mediaClassName, - containerFluidClassName, + contentWrapperClassName, } = props; const windowWidth = useWindowWidth(); const isMobile = windowWidth <= BREAKPOINTS.sm; @@ -131,10 +131,7 @@ export const HeaderBlock = (props: React.PropsWithChildren > {backgroundThemed && fullWidth && } {backgroundThemed && } - + {breadcrumbs && ( @@ -143,7 +140,7 @@ export const HeaderBlock = (props: React.PropsWithChildren )} - + Date: Wed, 30 Jul 2025 12:03:36 +0300 Subject: [PATCH 7/8] feat: update memory bank --- memory-bank/activeContext.md | 2 + memory-bank/progress.md | 8 +- memory-bank/systemPatterns.md | 7 + memory-bank/techContext.md | 8 +- memory-bank/usage/headerBlock.md | 443 +++++++++++++++++++------------ src/blocks/Header/Header.tsx | 11 +- 6 files changed, 302 insertions(+), 177 deletions(-) diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index 025d0f41d..af622d061 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -20,9 +20,11 @@ Recent development has focused on: - **Enhanced Background Support**: New `fullWidthMedia` property for full-width media backgrounds - **Improved Media Control**: Added `mediaView` and `mediaClassName` for better media customization - **Layout Customization**: Added `contentWrapperClassName` for custom styling of the content-wrapper element + - **Content Inner Customization**: Added `contentInnerClassName` for custom styling of the content-inner element - **Accessibility Improvements**: Enhanced ARIA support with `useUniqId()` and proper labeling - **Context Integration**: Better integration with `useWindowWidth` and responsive breakpoints - **Component Architecture**: Refactored background rendering into separate `Background` and `FullWidthBackground` components + - **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better clarity 2. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns: diff --git a/memory-bank/progress.md b/memory-bank/progress.md index d6befe6d0..e2f79afde 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -2,7 +2,7 @@ ## Current Status -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. +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.5.1-alpha.1 and follows semantic versioning for releases. ## What Works @@ -30,6 +30,12 @@ The library includes a comprehensive set of blocks for various use cases: The HeaderBlock has been significantly enhanced with new capabilities: - **Media Customization**: `mediaView` and `mediaClassName` props for better media control +- **Layout Customization**: Multiple className props for fine-grained styling control: + - `gridClassName` for Grid component styling + - `contentWrapperClassName` for content wrapper styling + - `contentInnerClassName` for content inner element styling + - `mediaClassName` for media element styling +- **Props Evolution**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better clarity ### Sub-block Components diff --git a/memory-bank/systemPatterns.md b/memory-bank/systemPatterns.md index 5e7c6aae1..7217cfa80 100644 --- a/memory-bank/systemPatterns.md +++ b/memory-bank/systemPatterns.md @@ -97,6 +97,12 @@ HeaderBlock follows an enhanced architectural pattern with component composition │ • description and additionalInfo │ │ • status element support │ │ • buttons with ARIA labeling │ +├─────────────────────────────────────┤ +│ Layout Customization │ +│ • gridClassName for Grid styling │ +│ • contentWrapperClassName │ +│ • contentInnerClassName │ +│ • mediaClassName for media styling │ └─────────────────────────────────────┘ ``` @@ -106,6 +112,7 @@ Key HeaderBlock patterns: - **Enhanced Content**: Support for overtitle, additionalInfo, status, and custom title rendering - **Responsive Integration**: useWindowWidth hook and BREAKPOINTS constants - **Media Flexibility**: mediaView and mediaClassName for customization +- **Layout Customization**: Multiple className props for fine-grained styling control - **Accessibility**: Proper ARIA labeling with titleId for button descriptions ### Card Component Architecture diff --git a/memory-bank/techContext.md b/memory-bank/techContext.md index 0184440f9..fde0d8f0f 100644 --- a/memory-bank/techContext.md +++ b/memory-bank/techContext.md @@ -85,7 +85,13 @@ ### HeaderBlock Technical Improvements -- **Type Safety**: Extended TypeScript interfaces with new properties (`mediaClassName`, `gridClassName`) +- **Type Safety**: Extended TypeScript interfaces with new properties: + - `mediaClassName` for media element styling + - `gridClassName` for Grid component styling + - `contentWrapperClassName` for content wrapper styling + - `contentInnerClassName` for content inner element styling +- **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better semantic clarity +- **Enhanced Layout Control**: Multiple className props provide fine-grained styling control over different HeaderBlock elements ## Technical Constraints diff --git a/memory-bank/usage/headerBlock.md b/memory-bank/usage/headerBlock.md index 66957909c..5ec01a22e 100644 --- a/memory-bank/usage/headerBlock.md +++ b/memory-bank/usage/headerBlock.md @@ -1,237 +1,332 @@ -# HeaderBlock Usage Documentation +# HeaderBlock Usage + +This document outlines how the HeaderBlock is used and its recent enhancements in the page-constructor project. ## Overview -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. +The HeaderBlock is a versatile block component that serves as a page header with support for titles, descriptions, media, backgrounds, and call-to-action buttons. It provides extensive customization options for layout, styling, and content presentation. -## Enhanced Properties +## Recent Enhancements -### Content Structure +The HeaderBlock has been significantly enhanced with new functionality: -#### `overtitle` +### Layout Customization Props -- **Type**: `string | JSX.Element` -- **Description**: Text or JSX element displayed above the main title -- **Usage**: For category labels, breadcrumb-like navigation, or contextual information +The HeaderBlock now supports multiple className props for fine-grained styling control: -```json -{ - "type": "header-block", - "overtitle": "Product Category", - "title": "Main Product Title" -} -``` +- **`gridClassName`**: Custom styling for the Grid component +- **`contentWrapperClassName`**: Custom styling for the content wrapper element +- **`contentInnerClassName`**: Custom styling for the content inner element +- **`mediaClassName`**: Custom styling for media elements -#### `additionalInfo` +### Props Evolution -- **Type**: `string` -- **Description**: Additional information displayed after the description -- **Content Type**: YFM (Yandex Flavored Markdown) -- **Usage**: For supplementary details, disclaimers, or extended descriptions +- **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better semantic clarity -```json -{ - "type": "header-block", - "title": "Product Title", - "description": "Main product description", - "additionalInfo": "**Note**: Additional details about the product" -} -``` +### Enhanced Content Structure -#### `status` +- **`overtitle`**: Content displayed above the main title +- **`additionalInfo`**: Additional information displayed after the description +- **`status`**: Status element support within the title area +- **`renderTitle`**: Custom function for rendering the title -- **Type**: `JSX.Element` -- **Description**: Status element displayed next to the title -- **Usage**: For badges, labels, or status indicators +### Background and Media Features -### Custom Rendering +- **`fullWidthMedia`**: Support for full-width media backgrounds +- **`mediaView`**: Control over media display mode ('full' by default) +- **Component Composition**: Separate `Background` and `FullWidthBackground` components for better maintainability -#### `renderTitle` +## Component Architecture -- **Type**: `(title: string) => React.ReactNode` -- **Description**: Function for custom title rendering -- **Usage**: When you need custom title formatting or additional elements within the title +```tsx +type ElementsClassName = { + gridClassName?: string; + mediaClassName?: string; + contentWrapperClassName?: string; + contentInnerClassName?: string; +}; -### Media Enhancements - -#### `mediaView` +export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName; +``` -- **Type**: `'full' | 'fit'` -- **Default**: `'full'` -- **Description**: Controls how media content is displayed -- **Usage**: - - `'full'`: Media fills the available space - - `'fit'`: Media maintains aspect ratio within bounds +### Internal Structure + +The HeaderBlock uses a sophisticated layout structure: + +```tsx +
+ {/* Full width background */} + {backgroundThemed && fullWidth && } + + {/* Media background */} + {backgroundThemed && } + + + {/* Breadcrumbs */} + {breadcrumbs && ( + + + + + + )} + + + + + + + {/* Content: overtitle, title, description, additionalInfo, buttons */} + + + + + {/* Right-side media */} + {hasRightSideImage && ( + + )} + + + +
+``` -#### `mediaClassName` +## Key Features -- **Type**: `string` -- **Description**: Additional CSS class for media elements -- **Usage**: For custom styling of media content +### Responsive Design Integration -#### `contentWrapperClassName` +- **`useWindowWidth()`**: Hook for responsive behavior +- **`BREAKPOINTS`**: Constants for consistent breakpoint handling +- **Mobile Detection**: Automatic mobile detection for media rendering -- **Type**: `string` -- **Description**: Additional CSS class for the content-wrapper element -- **Usage**: For custom styling of the content wrapper that contains the header layout +### Accessibility -### Background Enhancements +- **`useUniqId()`**: Generates unique IDs for accessibility +- **ARIA Labeling**: Proper ARIA attributes for buttons with `titleId` +- **Semantic HTML**: Uses proper `
` element -#### `fullWidthMedia` +### Theme Support -- **Type**: `boolean` -- **Description**: Allows media backgrounds to extend to full viewport width -- **Usage**: For immersive background experiences +- **`getThemedValue()`**: Utility for theme-aware properties +- **Theme Context**: Integration with the global theme system +- **Themed Properties**: Support for light/dark theme variations -```json -{ - "type": "header-block", - "title": "Immersive Header", - "background": { - "image": "background.jpg", - "fullWidthMedia": true - } -} -``` - -## Technical Implementation +## Usage Examples -### Component Architecture +### Basic HeaderBlock -The HeaderBlock now uses a component composition pattern: +```tsx + +``` +### With Custom Layout Styling + +```tsx + ``` -HeaderBlock -├── Background (for media backgrounds) -├── FullWidthBackground (for full-width backgrounds) -└── Content Structure - ├── overtitle - ├── title (with custom rendering support) - ├── description - ├── additionalInfo - └── buttons + +### With Enhanced Content + +```tsx +Beta} + renderTitle={(title) => } +/> ``` -### Responsive Design +### With Full-Width Background + +```tsx + +``` -- **WindowWidth Integration**: Uses `useWindowWidth` hook for responsive behavior -- **Breakpoint Constants**: Leverages `BREAKPOINTS` constants for consistent responsive design -- **Mobile Adaptation**: Enhanced mobile experience with conditional media rendering +### With Media and Custom View -### Accessibility Features +```tsx + +``` -- **Unique IDs**: Uses `useUniqId()` hook for proper ARIA labeling -- **ARIA Relationships**: Buttons are properly associated with titles using `aria-describedby` -- **Screen Reader Support**: Improved content structure for better screen reader navigation +## Background Components + +### Background Component + +Handles media backgrounds with responsive behavior: + +```tsx +const Background = ({background, isMobile}: BackgroundProps) => { + const {url, image, fullWidthMedia, video, color} = background; + const imageObject = url ? getMediaImage(url) : image; + const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image); + + return ( +
+ {renderMedia && ( + + )} +
+ ); +}; +``` -### Background Components +### FullWidthBackground Component -#### Background Component +Handles full-width background colors: -- Handles media backgrounds with video and image support -- Mobile-responsive media rendering -- Parallax support (disabled by default) +```tsx +const FullWidthBackground = ({background}: FullWidthBackgroundProps) => ( +
+); +``` -#### FullWidthBackground Component +## Integration Patterns -- Renders full-width background colors -- Used when `fullWidth` or `fullWidthMedia` is enabled +### With Breadcrumbs -## Usage Examples +```tsx + +``` -### Basic Enhanced Header +### With Custom Buttons -```json -{ - "type": "header-block", - "overtitle": "New Release", - "title": "Product Launch 2024", - "description": "Introducing our latest innovation", - "additionalInfo": "Available in **limited quantities**", - "buttons": [ +```tsx + ``` -### Header with Custom Media View - -```json -{ - "type": "header-block", - "title": "Product Showcase", - "description": "Featured product display", - "image": { - "src": "product-image.jpg", - "alt": "Product showcase" - }, - "mediaView": "fit", - "mediaClassName": "custom-media-style" -} -``` +## Best Practices -## Migration Notes +### Layout Customization -### New Properties +1. **Use Semantic Class Names**: When providing custom className props, use semantic names that describe the purpose +2. **Maintain Consistency**: Keep styling consistent with the overall design system +3. **Responsive Considerations**: Ensure custom styles work across different screen sizes -- All new properties are optional and backward compatible -- Existing HeaderBlock configurations will continue to work unchanged +### Content Structure -### Enhanced Features +1. **Hierarchy**: Use overtitle for context, title for main message, description for details +2. **Accessibility**: Ensure proper heading hierarchy and ARIA labeling +3. **Content Length**: Keep titles concise and descriptions informative but not overwhelming -- Improved accessibility is automatically applied -- Responsive design enhancements are enabled by default -- Background rendering improvements are transparent to existing usage +### Media Usage -### Deprecated Properties +1. **Image Optimization**: Use appropriately sized and optimized images +2. **Theme Support**: Provide both light and dark theme variants when needed +3. **Mobile Adaptation**: Consider how media displays on mobile devices -- Some legacy properties may be deprecated in future versions -- Check the schema for current property status +### Background Implementation -## Best Practices +1. **Performance**: Use appropriate image formats and sizes for backgrounds +2. **Contrast**: Ensure sufficient contrast between background and text +3. **Fallbacks**: Provide fallback colors for when images fail to load + +## Technical Implementation -1. **Content Hierarchy**: Use `overtitle` for contextual information, `title` for main heading, `description` for primary details, and `additionalInfo` for supplementary content +### Type Safety -2. **Accessibility**: Always provide meaningful `alt` text for images and ensure proper content structure +The HeaderBlock uses comprehensive TypeScript types: -3. **Responsive Design**: Test headers across different screen sizes, especially when using custom media configurations +```tsx +interface BackgroundProps { + background: HeaderBlockBackground; + isMobile: boolean; +} + +interface FullWidthBackgroundProps { + background: HeaderBlockBackground; +} + +type ElementsClassName = { + gridClassName?: string; + mediaClassName?: string; + contentWrapperClassName?: string; + contentInnerClassName?: string; +}; +``` -4. **Performance**: Use appropriate image sizes and formats for background media +### Context Integration -5. **Theme Consistency**: Ensure theme settings work well with background colors and media content +- **Theme Context**: `useTheme()` for theme-aware rendering +- **Window Width Context**: `useWindowWidth()` for responsive behavior +- **Breakpoints**: `BREAKPOINTS` constants for consistent responsive design -## Schema Reference +### Utility Functions -The HeaderBlock schema includes all enhanced properties with proper validation: +- **`getThemedValue()`**: Resolves themed properties +- **`getMediaImage()`**: Processes media URLs +- **`mergeVideoMicrodata()`**: Adds structured data for videos +- **`useUniqId()`**: Generates unique IDs for accessibility -- `overtitle`: String or JSX content type -- `additionalInfo`: YFM content with textarea input -- `mediaView`: Enum with 'full' and 'fit' options -- `fullWidthMedia`: Boolean for background configuration -- `renderTitle`: Function prop (not in schema, runtime only) -- `status`: JSX element (not in schema, runtime only) -- `mediaClassName`: String for custom styling -- `contentWrapperClassName`: String for custom styling (not in schema, runtime only) +This enhanced HeaderBlock provides a powerful and flexible foundation for creating compelling page headers with extensive customization options while maintaining accessibility and performance standards. diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx index 0759c6a56..12980e3ec 100644 --- a/src/blocks/Header/Header.tsx +++ b/src/blocks/Header/Header.tsx @@ -23,6 +23,7 @@ type ElementsClassName = { gridClassName?: string; mediaClassName?: string; contentWrapperClassName?: string; + contentInnerClassName?: string; }; export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName; @@ -94,6 +95,7 @@ export const HeaderBlock = (props: React.PropsWithChildren additionalInfo, mediaClassName, contentWrapperClassName, + contentInnerClassName, } = props; const windowWidth = useWindowWidth(); const isMobile = windowWidth <= BREAKPOINTS.sm; @@ -149,7 +151,14 @@ export const HeaderBlock = (props: React.PropsWithChildren 'vertical-offset': curVerticalOffset, })} > - + {overtitle && (
{typeof overtitle === 'string' ? ( From e6144a6ac4e8bb49387c1162a908ab0d7bc7eb96 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Mon, 4 Aug 2025 17:24:16 +0300 Subject: [PATCH 8/8] feat: fix progress --- memory-bank/progress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/memory-bank/progress.md b/memory-bank/progress.md index e2f79afde..5c66831bb 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -2,7 +2,7 @@ ## Current Status -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.5.1-alpha.1 and follows semantic versioning for releases. +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. ## What Works