feat: add className property for banner block (#1031)

Co-authored-by: bablos <[email protected]>

Author: aleksey-shkadov

src/blocks/Banner/Banner.tsx

@@ -10,10 +10,10 @@ import './Banner.scss';
 const b = block('banner-block');
 
 export const BannerBlock = (props: BannerBlockProps) => {
-    const {animated, ...bannerProps} = props;
+    const {animated, className, ...bannerProps} = props;
 
     return (
-        <AnimateBlock className={b()} animate={animated}>
+        <AnimateBlock className={b(null, className)} animate={animated}>
             <BannerCard {...bannerProps} />
         </AnimateBlock>
     );

src/blocks/Banner/__stories__/data.json

@@ -3,6 +3,7 @@
     "content": {
       "theme": "dark",
       "type": "banner-block",
+      "className": "",
       "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
       "subtitle": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
       "image": "/story-assets/img_8-12_dark.png",
@@ -18,6 +19,7 @@
     "content": {
       "theme": "light",
       "type": "banner-block",
+      "className": "",
       "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
       "subtitle": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
       "image": {

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

@@ -157,6 +157,7 @@ export interface BasicCardProps
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;