feat: added mediaView for image and theme for button in banner block (#…

…794)

Features
* add theme to button in banner-block (#787)
* add mediaView (`full | fit` — full is default value, the media content covers all width and height. Fit - media content has real sizes and locates in the middle) to image in banner-block (#787)

src/blocks/Banner/__stories__/Banner.mdx

@@ -20,4 +20,7 @@ import * as BannerStories from './Banner.stories.tsx';
 `color?: string` — Background color
 
 `button: Button` — Button
+
+`mediaView?: full | fit` — full is default value, the media content covers all width and height. Fit - media content has real sizes and locates in the middle
+
 </StoryTemplate>

src/blocks/Header/__stories__/Header.mdx

@@ -47,4 +47,4 @@ There could be only one one Header block on the page.
 `verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl'` — Top and bottom offsets from the text. (Values: '0' - 0px, 's' - 48px, 'm' - 80px, 'l' - 112px, 'xl' - 144px.)
 </StoryTemplate>
 
-`mediaView?: full | fit` — full is default value, the media content covers all widht and height. Fit - media content has real sizes and locates in the middle
+`mediaView?: full | fit` — full is default value, the media content covers all width and height. Fit - media content has real sizes and locates in the middle

src/models/constructor-items/blocks.ts

@@ -28,6 +28,7 @@ import {
     MapProps,
     MediaDirection,
     MediaProps,
+    MediaView,
     TextSize,
     TextTheme,
     ThemedImage,
@@ -159,7 +160,7 @@ export interface HeaderBlockProps {
     offset?: HeaderOffset;
     image?: ThemedImage;
     video?: ThemedMediaVideoProps;
-    mediaView?: 'fit' | 'full';
+    mediaView?: MediaView;
     background?: ThemedHeaderBlockBackground;
     theme?: 'light' | 'dark';
     verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';

src/models/constructor-items/common.ts

@@ -386,6 +386,8 @@ export interface TitleItemBaseProps {
     onClick?: () => void;
 }
 
+export type MediaView = 'fit' | 'full';
+
 // card
 export type MediaBorder = 'shadow' | 'line' | 'none';
 export type CardBorder = MediaBorder;

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

@@ -15,6 +15,7 @@ import {
     ImageProps,
     LinkProps,
     MediaProps,
+    MediaView,
     PriceDetailedProps,
     TextTheme,
     Themable,
@@ -152,7 +153,8 @@ export interface BannerCardProps {
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
+    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    mediaView?: MediaView;
 }
 
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}

src/sub-blocks/BannerCard/BannerCard.scss

@@ -84,6 +84,14 @@ $block: '.#{$ns}banner-card';
         }
     }
 
+    &_media-view_fit {
+        #{$block}__image {
+            img {
+                object-fit: contain;
+            }
+        }
+    }
+
     @media (max-width: map-get($gridBreakpoints, 'sm') - 1) {
         &__image {
             display: none;

src/sub-blocks/BannerCard/BannerCard.tsx

@@ -13,11 +13,12 @@ export const BannerCard = (props: BannerCardProps) => {
     const {
         title,
         subtitle,
-        button: {url, text, target},
+        button: {url, text, target, theme: buttonTheme = 'raised'},
         color,
         theme: textTheme = 'light',
         image,
         disableCompress,
+        mediaView = 'full',
     } = props;
     const theme = useTheme();
     const contentStyle: Record<string, string> = {};
@@ -27,7 +28,7 @@ export const BannerCard = (props: BannerCardProps) => {
     }
 
     return (
-        <div className={b({theme: textTheme})}>
+        <div className={b({theme: textTheme, ['media-view']: mediaView})}>
             <div className={b('content')} style={contentStyle}>
                 <div className={b('info')}>
                     <div className={b('text')}>
@@ -45,7 +46,7 @@ export const BannerCard = (props: BannerCardProps) => {
                     <RouterLink href={url}>
                         <Button
                             className={b('button')}
-                            theme="raised"
+                            theme={buttonTheme}
                             size="xl"
                             text={text}
                             url={url}