chore(BasicCard): background color hover property update tests and schema (#1327)

* feat: add background color hover property for BasicCard

* chore(BasicCard): update tests and schema

---------

Co-authored-by: Maksim Malofeev <[email protected]>
Co-authored-by: Maksim Malofeev <[email protected]>

Author: 3 people

memory-bank/activeContext.md

@@ -65,6 +65,14 @@ Recent development has focused on:
 8. **Performance Optimization**: Reducing bundle size and improving rendering performance
 9. **Documentation**: Expanding Storybook examples and documentation
 
+10. **Hover Background Color Enhancement**: Added support for customizable hover background colors in BasicCard component:
+
+    - **Schema Support**: Added `hoverBackgroundColor` property to BasicCard schema as optional string field
+    - **Component Implementation**: BasicCard component now accepts `hoverBackgroundColor` prop and applies it as CSS custom property `--hover-background-color`
+    - **CSS Integration**: Uses existing `background-hover()` mixin in CardBase component that applies the custom property on hover
+    - **Flexible Styling**: Allows any valid CSS color value (hex, rgb, rgba, named colors, etc.)
+    - **Backward Compatibility**: Optional property that doesn't affect existing implementations
+
 ## Active Decisions and Considerations
 
 ### Architecture

src/sub-blocks/BasicCard/README.md

@@ -15,3 +15,5 @@
 `buttons?: Button[]` — An array with button objects (see [Content blocks](?path=/docs/documentation-types--docs))
 
 `border: 'shadow' | 'line' | 'none'` — Card border properties (defaults to `'shadow'`).
+
+`hoverBackgroundColor?: string` - Card hover background color

src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-HoverEffects-light-chromium-linux.png

@@ -40,4 +40,6 @@ For a detailed usage guide of the BasicCard sub-block, see [BasicCard Usage](htt
 
 `target?: '_blank' | '_parent' | '_top' | '_self'` — Target for the URL
 
+`hoverBackgroundColor?: string` - Card hover background color
+
 </StoryTemplate>

src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-HoverEffects-light-webkit-linux.png

@@ -4,6 +4,7 @@ import {
     ControlPosition,
     Default,
     GravityIcons,
+    HoverEffects,
     Sizes,
     WithBorder,
     WithContentList,
@@ -59,4 +60,10 @@ test.describe('BasicCard', () => {
         await defaultDelay();
         await expectScreenshot({skipTheme: 'dark'});
     });
+
+    test('render stories <HoverEffects>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<HoverEffects />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
 });

src/sub-blocks/BasicCard/__stories__/BasicCard.mdx

@@ -11,4 +11,5 @@ export const {
     ControlPosition,
     Sizes,
     GravityIcons,
+    HoverEffects,
 } = composeStories(BasicCardStories);

src/sub-blocks/BasicCard/__tests__/BasicCard.visual.test.tsx

@@ -40,6 +40,9 @@ export const BasicCard = {
                 type: 'string',
                 enum: ['content', 'footer'],
             },
+            hoverBackgroundColor: {
+                type: 'string',
+            },
         },
     },
 };