@gravity-ui/page-constructor 4.47.0-beta.0 → 4.47.0

package/server/models/constructor-items/blocks.d.ts

@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase } from '../common';
-import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
+import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
 import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
@@ -166,7 +166,6 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mobileDirection?: MediaDirection;
     largeMedia?: boolean;
     mediaOnly?: boolean;
-    disableShadow?: boolean;
     mediaOnlyColSizes?: GridColumnSizesType;
 }
 export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
@@ -175,10 +174,10 @@ export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' |
     /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;
 }
-export interface MediaBlockProps extends MediaBaseBlockProps {
+export interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {
     media: ThemeSupporting<MediaProps>;
 }
-export interface MapBlockProps extends MediaBaseBlockProps {
+export interface MapBlockProps extends MediaBaseBlockProps, WithBorder {
     map: MapProps;
 }
 export interface InfoBlockProps {
@@ -234,7 +233,9 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     titleClassName?: string;
     description?: string;
     colSizes?: GridColumnSizesType;
-    background?: BackgroundImageProps;
+    background?: BackgroundImageProps & {
+        border?: CardBorder;
+    };
 }
 export type FilterTag = {
     id: string;

package/server/models/constructor-items/common.d.ts

@@ -215,6 +215,7 @@ export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
+    className?: string;
 }
 export interface GMapProps extends MapBaseProps {
     address: string;
@@ -257,14 +258,12 @@ export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
 }
-export type JustifyValues = 'left' | 'right' | 'center';
 export interface IframeProps {
     src: string;
-    width?: number | string;
-    height?: number | string;
+    width?: number;
+    height?: number;
     title?: string;
     name?: string;
-    justifyContent?: JustifyValues;
 }
 export type DataLensProps = string | DataLensObjectProps;
 export interface AuthorItem {
@@ -294,7 +293,8 @@ export interface TitleItemBaseProps {
     custom?: string | ReactNode;
     onClick?: () => void;
 }
-export type CardBorder = 'shadow' | 'line' | 'none';
+export type MediaBorder = 'shadow' | 'line' | 'none';
+export type CardBorder = MediaBorder;
 export interface CardBaseProps {
     border?: CardBorder;
 }
@@ -370,4 +370,11 @@ export interface YandexFormProps extends AnalyticsEventsBase {
     metrikaGoals?: string | string[];
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
 }
+export interface WithBorder {
+    border?: MediaBorder;
+    /**
+     * @deprecated use custom class for media-component
+     */
+    disableShadow?: boolean;
+}
 export {};

package/styles/mixins.scss

@@ -252,15 +252,7 @@
     border-radius: $borderRadius;
 }
 
-@mixin card($hover: false) {
-    min-height: 248px;
-    height: 100%;
-    overflow-x: hidden;
-    border-radius: $borderRadius;
-    background-color: var(--g-color-base-float);
-
-    transition: box-shadow 0.3s $ease-out-cubic;
-
+@mixin card-border($hover: false) {
     &_border_line {
         border: 1px solid var(--g-color-line-generic);
     }
@@ -283,6 +275,17 @@
     }
 }
 
+@mixin card($hover: false) {
+    min-height: 248px;
+    height: 100%;
+    overflow-x: hidden;
+    border-radius: $borderRadius;
+    background-color: var(--g-color-base-float);
+
+    transition: box-shadow 0.3s $ease-out-cubic;
+    @include card-border($hover);
+}
+
 @mixin card-image {
     margin: $imagePadding;
     border-radius: calc(#{$borderRadius} - #{$imagePadding});
@@ -351,7 +354,7 @@
                 transition: top $transition, opacity $transition;
             }
 
-            @for $i from 0 through 9 {
+            @for $i from 0 through 99 {
                 #{$item-class}:nth-child(#{$i}) {
                     transition-delay: $i * 0.1s + $delay;
                 }
@@ -616,3 +619,20 @@ unpredictable css rules order in build */
         }
     }
 }
+
+@mixin media-border() {
+    &_border {
+        &_shadow {
+            @include image-shadow();
+        }
+
+        &_line {
+            border-radius: $borderRadius;
+            border: 1px solid var(--g-color-line-generic);
+        }
+
+        &_none {
+            border-radius: $borderRadius;
+        }
+    }
+}