fixup! feat: add border to media in media-block and refactor it in layout-items

Author: niktverd

src/blocks/Media/Media.tsx

@@ -14,9 +14,9 @@ export const MediaBlock = (props: MediaBlockProps) => {
     const mediaThemed = getThemedValue(media, theme);
 
     return (
-        <MediaBase {...props} onScroll={() => setPlay(true)}>
+        <MediaBase {...props} onScroll={() => setPlay(true)} border={border}>
             <MediaBase.Card>
-                <Media {...mediaThemed} playVideo={play} border={border} rounded />
+                <Media {...mediaThemed} playVideo={play} />
             </MediaBase.Card>
         </MediaBase>
     );

src/blocks/Media/__stories__/Media.stories.tsx

@@ -219,12 +219,13 @@ WithoutShadow.args = {
     ...DefaultArgs,
     ...data.withoutShadow.content,
     disableShadow: true,
+    border: 'none',
 } as MediaBlockProps;
 WithBorder.args = {
     ...DefaultArgs,
     ...data.withoutShadow.content,
     disableShadow: true,
-    border: true,
+    border: 'line',
 } as MediaBlockProps;
 Iframe.args = {
     ...DefaultArgs,

src/components/Media/Media.scss

@@ -15,10 +15,9 @@ $block: '.#{$ns}Media';
     }
 
     &_border {
-        border: 1px solid var(--g-color-line-generic);
-    }
-
-    &_rounded {
-        border-radius: $borderRadius;
+        &_line {
+            border-radius: $borderRadius;
+            border: 1px solid var(--g-color-line-generic);
+        }
     }
 }

src/components/Media/Media.tsx

@@ -53,8 +53,7 @@ export const Media = (props: MediaAllProps) => {
         onImageLoad,
         iframe,
         margins,
-        border = false,
-        rounded = false,
+        border = 'shadow',
     } = props;
 
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
@@ -160,11 +159,7 @@ export const Media = (props: MediaAllProps) => {
     ]);
 
     return (
-        <div
-            className={b({border, rounded}, className)}
-            style={{backgroundColor: color}}
-            data-qa={qa}
-        >
+        <div className={b({border}, className)} style={{backgroundColor: color}} data-qa={qa}>
             {content}
         </div>
     );

src/components/MediaBase/MediaBase.scss

@@ -18,8 +18,15 @@ $block: '.#{$ns}media-base';
             border-radius: $borderRadius; // special for safari
         }
 
-        &_shadow {
-            @include image-shadow();
+        &_border {
+            &_shadow {
+                @include image-shadow();
+            }
+
+            &_line {
+                border-radius: $borderRadius;
+                border: 1px solid var(--g-color-line-generic);
+            }
         }
     }
 

src/components/MediaBase/MediaBase.tsx

@@ -29,6 +29,7 @@ export const MediaBase = (props: MediaBaseProps) => {
         mediaOnly,
         disableShadow = false,
         onScroll,
+        // border, // uncomment on major
         ...mediaContentProps
     } = props;
     const {title, description} = mediaContentProps;
@@ -68,7 +69,14 @@ export const MediaBase = (props: MediaBaseProps) => {
                     </Col>
                     {card ? (
                         <Col sizes={mediaSizes}>
-                            <div className={b('card', {shadow: !disableShadow})}>{card}</div>
+                            <div
+                                className={b('card', {
+                                    // border, // uncomment on major
+                                    border: disableShadow ? 'none' : 'shadow', // remove on major
+                                })}
+                            >
+                                {card}
+                            </div>
                         </Col>
                     ) : null}
                 </Row>

src/models/constructor-items/blocks.ts

@@ -223,6 +223,9 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps, With
     mobileDirection?: MediaDirection;
     largeMedia?: boolean;
     mediaOnly?: boolean;
+    /**
+     * @deprecated use border='none' or border='line' instead
+     */
     disableShadow?: boolean;
 }
 

src/models/constructor-items/common.ts

@@ -386,7 +386,8 @@ export interface TitleItemBaseProps {
 }
 
 // card
-export type CardBorder = 'shadow' | 'line' | 'none';
+export type MediaBorder = 'shadow' | 'line' | 'none';
+export type CardBorder = MediaBorder;
 
 export interface CardBaseProps {
     border?: CardBorder;
@@ -477,6 +478,5 @@ export interface YandexFormProps extends AnalyticsEventsBase {
 }
 
 export interface WithBorder {
-    border?: boolean;
-    rounded?: boolean;
+    border?: MediaBorder | boolean;
 }

src/sub-blocks/LayoutItem/LayoutItem.scss

@@ -7,6 +7,7 @@ $block: '.#{$ns}layout-item';
     &__media {
         width: 100%;
         display: block;
+        border-radius: $borderRadius;
     }
 
     &__meta-info {

src/sub-blocks/LayoutItem/LayoutItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Content} from '..';
 import {FullscreenMedia, Media, MetaInfo} from '../../components';
-import {LayoutItemProps} from '../../models';
+import {LayoutItemProps, MediaBorder} from '../../models';
 import {block} from '../../utils';
 
 import {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils';
@@ -15,48 +15,53 @@ const LayoutItem = ({
     content: {links, ...content},
     metaInfo,
     media,
-    border,
+    border = 'none',
     fullscreen,
     className,
     analyticsEvents,
-}: LayoutItemProps) => (
-    <div className={b(null, className)}>
-        {fullscreen && hasFullscreen(media) ? (
-            <FullscreenMedia showFullscreenIcon={showFullscreenIcon(media)}>
-                {({
-                    className: mediaClassName,
-                    fullscreen: _fullscreen,
-                    ...fullscreenMediaProps
-                } = {}) => (
-                    <Media
-                        {...media}
-                        {...fullscreenMediaProps}
-                        className={b('media', mediaClassName)}
-                        analyticsEvents={analyticsEvents}
-                        border={border}
-                        rounded
-                    />
-                )}
-            </FullscreenMedia>
-        ) : (
-            <Media
-                {...media}
-                className={b('media')}
-                analyticsEvents={analyticsEvents}
-                border={border}
-                rounded
-            />
-        )}
-        {metaInfo && <MetaInfo items={metaInfo} className={b('meta-info')} />}
-        <div className={b('content')}>
-            <Content
-                {...content}
-                links={getLayoutItemLinks(links)}
-                size="s"
-                colSizes={{all: 12, md: 12}}
-            />
+}: LayoutItemProps) => {
+    let tempBorder: MediaBorder = 'none';
+    if (typeof border === 'boolean' && border) {
+        tempBorder = 'line';
+    }
+
+    return (
+        <div className={b(null, className)}>
+            {fullscreen && hasFullscreen(media) ? (
+                <FullscreenMedia showFullscreenIcon={showFullscreenIcon(media)}>
+                    {({
+                        className: mediaClassName,
+                        fullscreen: _fullscreen,
+                        ...fullscreenMediaProps
+                    } = {}) => (
+                        <Media
+                            {...media}
+                            {...fullscreenMediaProps}
+                            className={b('media', mediaClassName)}
+                            analyticsEvents={analyticsEvents}
+                            border={tempBorder}
+                        />
+                    )}
+                </FullscreenMedia>
+            ) : (
+                <Media
+                    {...media}
+                    className={b('media')}
+                    analyticsEvents={analyticsEvents}
+                    border={tempBorder}
+                />
+            )}
+            {metaInfo && <MetaInfo items={metaInfo} className={b('meta-info')} />}
+            <div className={b('content')}>
+                <Content
+                    {...content}
+                    links={getLayoutItemLinks(links)}
+                    size="s"
+                    colSizes={{all: 12, md: 12}}
+                />
+            </div>
         </div>
-    </div>
-);
+    );
+};
 
 export default LayoutItem;

src/sub-blocks/LayoutItem/schema.ts

@@ -15,7 +15,13 @@ export const LayoutItem = {
         content: omit(ContentBase, ['colSize', 'size', 'centered']),
         metaInfo: metaInfo,
         border: {
-            type: 'boolean',
+            oneOf: [
+                {
+                    type: 'string',
+                    enum: ['shadow', 'line', 'none'],
+                },
+                {type: 'boolean'},
+            ],
         },
         fullscreen: {
             type: 'boolean',