feat(BackgroundCard): add possibility to set both borders and background for card

memory-bank/usage/backgroundCard.md

@@ -35,7 +35,8 @@ graph TD
   - `text`: Card description with YFM support (required)
   - `url`: URL that opens when clicking the card
   - `urlTitle`: Accessible title for the URL
-  - `border`: Border style - 'line', 'shadow', or 'none'
+  - `border`: Border style - 'line', 'shadow', or 'none'. Note: automatically reset to 'none' when `backgroundColor` or non-default `theme` is set, unless `forceBorder` is enabled
+  - `forceBorder`: Boolean (default: `false`). When `true`, the `border` value is applied as-is even if `backgroundColor` or a non-default `theme` is set
   - `background`: Background image with theme support
   - `backgroundColor`: Background color
   - `paddingBottom`: Space between the text and the bottom of the card - 's', 'm', 'l', or 'xl'
@@ -213,6 +214,7 @@ The BackgroundCard component integrates with the page-constructor theme system:
    - Use `line` border for subtle separation
    - Use `shadow` border for elevated appearance
    - Use `none` border for seamless integration
+   - To use borders together with `backgroundColor` or a non-default `theme`, set `forceBorder: true`
 
 5. **Padding Selection**:
 
@@ -352,6 +354,33 @@ Each value is a number between 1-12, representing the number of columns in a 12-
 />
 ```
 
+### With Background Color and Border (forceBorder)
+
+By default, `border` is reset to `'none'` when `backgroundColor` or a non-default `theme` is set. Use `forceBorder: true` to keep the border visible.
+
+```tsx
+<BackgroundCard
+  title="Lorem ipsum"
+  text="**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+  backgroundColor="#7ccea0"
+  theme="dark"
+  border="line"
+  forceBorder
+  buttons={[
+    {
+      text: 'Button',
+      theme: 'normal-contrast',
+      url: 'https://example.com',
+    },
+    {
+      text: 'Button',
+      theme: 'outlined-contrast',
+      url: 'https://example.com',
+    },
+  ]}
+/>
+```
+
 ## Storybook Documentation
 
 The BackgroundCard component includes Storybook stories demonstrating:

src/models/constructor-items/sub-blocks.ts

@@ -153,6 +153,7 @@ export interface BackgroundCardProps
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
+    forceBorder?: boolean;
 }
 
 export interface BasicCardProps

src/sub-blocks/BackgroundCard/BackgroundCard.tsx

@@ -29,13 +29,14 @@ const BackgroundCard = (props: BackgroundCardProps) => {
         controlPosition = 'content',
         list,
         size = 's',
+        forceBorder,
     } = props;
 
     const titleId = useUniqId();
 
     const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
-    const borderType = hasBackgroundColor ? 'none' : border;
+    const borderType = hasBackgroundColor && !forceBorder ? 'none' : border;
     const areControlsInFooter = !paddingBottom && controlPosition === 'footer';
 
     return (

src/sub-blocks/BackgroundCard/README.md

@@ -6,6 +6,12 @@
 
 `paddingBottom?: 's' | 'm' | 'l' | 'xl'` — Space between the text and the bottom of the card.
 
+`backgroundColor?: string` — Background color
+
+`border?: 'line' | 'shadow' | 'none'` — Border style. Note: when `backgroundColor` or non-default `theme` is set, `border` is automatically reset to `'none'` unless `forceBorder` is enabled.
+
+`forceBorder?: boolean` — When `true`, the `border` value is applied as-is even if `backgroundColor` or a non-default `theme` is set. Default: `false`.
+
 `title?: Title | string` — Card title
 
 `text?: string` — Card description (with YFM support)

src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx

@@ -87,6 +87,7 @@ export const Paddings = VariousContentTemplate.bind([]);
 export const CardThemes = CardThemesTemplate.bind([]);
 export const BorderLine = VariousContentTemplate.bind([]);
 export const BackgroundColor = VariousContentTemplate.bind([]);
+export const BorderWithBackground = CardThemesTemplate.bind([]);
 export const Sizes = VariousContentTemplate.bind([]);
 export const WithUrl = CardThemesTemplate.bind([]);
 export const ControlPosition = ControlPositionTemplate.bind([]);
@@ -145,6 +146,13 @@ BackgroundColor.parameters = {
     },
 };
 
+BorderWithBackground.args = data.borderWithBackground as BackgroundCardModel[];
+BorderWithBackground.parameters = {
+    controls: {
+        include: Object.keys(data.borderWithBackground),
+    },
+};
+
 WithUrl.args = data.withUrl as BackgroundCardModel[];
 WithUrl.parameters = {
     controls: {

src/sub-blocks/BackgroundCard/__stories__/data.json

@@ -213,6 +213,34 @@
   "borderLine": {
     "border": "line"
   },
+  "borderWithBackground": [
+    {
+      "type": "background-card",
+      "title": "Border line + backgroundColor",
+      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "backgroundColor": "#7ccea0",
+      "theme": "dark",
+      "border": "line",
+      "forceBorder": true
+    },
+    {
+      "type": "background-card",
+      "title": "Border shadow + backgroundColor",
+      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "backgroundColor": "#7ccea0",
+      "theme": "dark",
+      "border": "shadow",
+      "forceBorder": true
+    },
+    {
+      "type": "background-card",
+      "title": "Border line + dark theme",
+      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "theme": "dark",
+      "border": "line",
+      "forceBorder": true
+    }
+  ],
   "backgroundColor": [
     {
       "type": "background-card",

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

@@ -3,6 +3,7 @@ import {test} from '../../../../playwright/core/index';
 import {
     BackgroundColor,
     BorderLine,
+    BorderWithBackground,
     CardThemes,
     ControlPosition,
     Default,
@@ -52,6 +53,16 @@ test.describe('BackgroundCard', () => {
         await expectScreenshot({skipTheme: 'dark'});
     });
 
+    test('render stories <BorderWithBackground>', async ({
+        mount,
+        expectScreenshot,
+        defaultDelay,
+    }) => {
+        await mount(<BorderWithBackground />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
     test('render stories <WithUrl>', async ({mount, expectScreenshot, defaultDelay}) => {
         await mount(<WithUrl />);
         await defaultDelay();

src/sub-blocks/BackgroundCard/__tests__/helpers.tsx

@@ -9,6 +9,7 @@ export const {
     CardThemes,
     BorderLine,
     BackgroundColor,
+    BorderWithBackground,
     WithUrl,
     ControlPosition,
 } = composeStories(BackgroundCardStories);

src/sub-blocks/BackgroundCard/schema.ts

@@ -32,6 +32,9 @@ export const BackgroundCard = {
             backgroundColor: {
                 type: 'string',
             },
+            forceBorder: {
+                type: 'boolean',
+            },
             paddingBottom: {
                 type: 'string',
                 enum: ['s', 'm', 'l', 'xl'],