fix: add content colSizes option to background card (#1247)

Author: qradle-yndx

memory-bank/usage/backgroundCard.md

@@ -46,6 +46,7 @@ graph TD
   - `analyticsEvents`: Analytics events to track
   - `controlPosition`: Position of controls (links and buttons) - 'content' or 'footer'
   - `list`: Array of content list items
+  - `colSizes`: Grid column sizes configuration (default: `{all: 12, sm: 12}`)
 
 ## Usage Patterns
 
@@ -114,7 +115,7 @@ The BackgroundCard component is composed of several key parts:
       links={links}
       buttons={buttons}
       list={list}
-      colSizes={{all: 12, md: 12}}
+      colSizes={colSizes}
       controlPosition={areControlsInFooter ? 'bottom' : 'default'}
     />
   </CardBase.Content>
@@ -222,6 +223,25 @@ The BackgroundCard component integrates with the page-constructor theme system:
    - Use `content` position for standard layout
    - Use `footer` position for cards where controls should be aligned at the bottom
 
+## Column Sizing
+
+The BackgroundCard component supports responsive column sizing through the `colSizes` prop:
+
+```tsx
+// Default column sizing
+colSizes = {all: 12, md: 12};
+```
+
+This prop allows you to control how much of the available grid space the card's content should occupy at different breakpoints:
+
+- `all`: Base size for all viewport widths
+- `sm`: Size for small viewports
+- `md`: Size for medium viewports
+- `lg`: Size for large viewports
+- `xl`: Size for extra large viewports
+
+Each value is a number between 1-12, representing the number of columns in a 12-column grid system.
+
 ## Example Usage
 
 ### Basic BackgroundCard

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

@@ -141,7 +141,7 @@ export interface BackgroundCardProps
     extends CardBaseProps,
         AnalyticsEventsBase,
         CardLayoutProps,
-        Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
+        Omit<ContentBlockProps, 'centered' | 'controlPosition'> {
     url?: string;
     urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;

src/sub-blocks/BackgroundCard/BackgroundCard.tsx

@@ -25,6 +25,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
         buttons,
         analyticsEvents,
         urlTitle,
+        colSizes = {all: 12, md: 12},
         controlPosition = 'content',
         list,
         size = 's',
@@ -62,7 +63,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
                     links={links}
                     buttons={buttons}
                     list={list}
-                    colSizes={{all: 12, md: 12}}
+                    colSizes={colSizes}
                     controlPosition={areControlsInFooter ? 'bottom' : 'default'}
                 />
             </CardBase.Content>

src/sub-blocks/BackgroundCard/README.md

@@ -15,3 +15,5 @@
 `links?: Link[]` — An array with link objects (see [Content blocks](?path=/docs/documentation-types--docs))
 
 `buttons?: Button[]` — An array with button objects (see [Content blocks](?path=/docs/documentation-types--docs))
+
+`colSizes?: Object` — more info [Content blocks](?path=/docs/documentation-types--docs#colsizes).

src/sub-blocks/BackgroundCard/schema.ts

@@ -1,7 +1,13 @@
 import omit from 'lodash/omit';
 
 import {ImageObjectProps} from '../../components/Image/schema';
-import {BaseProps, CardBase, CardLayoutProps, withTheme} from '../../schema/validators/common';
+import {
+    BaseProps,
+    CardBase,
+    CardLayoutProps,
+    containerSizesObject,
+    withTheme,
+} from '../../schema/validators/common';
 import {AnalyticsEventSchema} from '../../schema/validators/event';
 import {ContentBase} from '../Content/schema';
 
@@ -47,6 +53,7 @@ export const BackgroundCard = {
                 type: 'string',
                 enum: ['content', 'footer'],
             },
+            colSizes: containerSizesObject,
         },
     },
 };