Add layout item (#132)

feat: add layout item and deprecate cardWithImage

Author: gorgeousvlad

package-lock.json

@@ -56,7 +56,8 @@
     "react-waypoint": "^10.1.0",
     "sanitize-html": "^2.6.1",
     "snakecase-keys": "^5.1.0",
-    "typograf": "^6.14.0"
+    "typograf": "^6.14.0",
+    "uuid": "^9.0.0"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0",
@@ -87,6 +88,7 @@
     "@types/react-slick": "^0.23.7",
     "@types/react-transition-group": "^4.4.4",
     "@types/sanitize-html": "^2.6.0",
+    "@types/uuid": "^9.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-local": "./eslint-plugin-local",
     "eslint-plugin-testing-library": "^5.9.1",

package.json

@@ -20,6 +20,7 @@ The following blocks are currently supported:
 - [`Partner` — Partner card](?path=/story/components-cards-partner--default&viewMode=docs)
 - [`Price Detailed` — Pricing](?path=/story/components-cards-pricedetailed--marked-list&viewMode=docs)
 - [`BackgroundCard` — Background card](?path=/story/components-cards-backgroundcard--default&viewMode=docs)
-- [`CardWithImage` — Card with a picture above the title](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
+- [`CardWithImage` — Card with a picture above the title (deprecated)](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
+- [`LayoutItem` — Component part of `Layout` component, consists with `Media` and `Content`](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
 - [`NewsCard` — News card](?path=/story/components-cards-newscard--default&viewMode=docs)
 - [`TutorialCard` — Card with an icon](?path=/story/components-cards-tutorialcard--default&viewMode=docs)

src/blocks/CardLayout/README.md

@@ -38,7 +38,8 @@ The following blocks are currently supported:
 - [`Partner` — Partner card](?path=/story/components-cards-partner--default&viewMode=docs)
 - [`Price Detailed` — Pricing](?path=/story/components-cards-pricedetailed--marked-list&viewMode=docs)
 - [`BackgroundCard` — Background card](?path=/story/components-cards-backgroundcard--default&viewMode=docs)
-- [`CardWithImage` — Card with a picture above the title](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
+- [`CardWithImage` — Card with a picture above the title (deprecated)](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
+- [`LayoutItem` — `Media` + `Content` components in one card-like view](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
 - [`MediaCard` — Card with an image](?path=/story/блоки-media--default&viewMode=docs)
 - [`NewsCard` — News card](?path=/story/components-cards-newscard--default&viewMode=docs)
 - [`TutorialCard` — Card with an icon](?path=/story/components-cards-tutorialcard--default&viewMode=docs)

src/blocks/Slider/README.md

@@ -4,6 +4,7 @@
 $block: '.#{$ns}full-screen-media';
 $closeButtonSize: 36px;
 $modalMediaHeight: 70vh;
+$modalYoutubeWidth: 70vw;
 
 %modal-media {
     display: block;
@@ -27,6 +28,10 @@ $modalMediaHeight: 70vh;
         position: relative;
     }
 
+    &__inline-media {
+        transform: translateZ(0);
+    }
+
     &__modal-media {
         border-radius: $borderRadius;
 
@@ -41,8 +46,8 @@ $modalMediaHeight: 70vh;
         &_type_youtube {
             @extend %modal-media;
 
-            width: calc(#{$modalMediaHeight} * 16 / 9);
-            height: $modalMediaHeight;
+            width: $modalYoutubeWidth;
+            height: calc(#{$modalYoutubeWidth} * 9 / 16);
         }
     }
 
@@ -90,11 +95,7 @@ $modalMediaHeight: 70vh;
         }
     }
 
-    @media (max-width: map-get($gridBreakpoints, 'lg')) {
-        &__media-wrapper {
-            pointer-events: none;
-        }
-
+    @media (max-width: map-get($gridBreakpoints, 'sm')) {
         &__icon-wrapper {
             display: none;
         }

src/components/FullscreenMedia/FullScreenMedia.scss

@@ -4,16 +4,17 @@ import {Icon, Modal} from '@gravity-ui/uikit';
 import {block} from '../../utils';
 import {PreviewClose, FullScreen} from '../../icons';
 import {MediaAllProps} from '../Media/Media';
-import {MobileContext} from '../../../src/context/mobileContext';
+import {MobileContext} from '../../context/mobileContext';
 
 import './FullScreenMedia.scss';
 
 export type ChildMediaRenderProps = Pick<
     MediaAllProps,
-    'fullScreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName'
+    'fullScreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'
 >;
 
 export interface FullScreenMediaProps {
+    showFullScreenIcon?: boolean;
     children: (props?: ChildMediaRenderProps) => JSX.Element;
 }
 
@@ -23,7 +24,7 @@ const CLOSE_ICON_SIZE = 30;
 
 const getMediaClass = (type: string) => b('modal-media', {type});
 
-const FullScreenMedia = ({children}: FullScreenMediaProps) => {
+const FullScreenMedia = ({children, showFullScreenIcon = true}: FullScreenMediaProps) => {
     const [isOpened, setIsOpened] = useState(false);
     const isMobile = useContext(MobileContext);
 
@@ -40,15 +41,17 @@ const FullScreenMedia = ({children}: FullScreenMediaProps) => {
     return (
         <div className={b()}>
             <div className={b('media-wrapper')} onClickCapture={openModal}>
-                {children()}
-                <div className={b('icon-wrapper')} onClickCapture={openModal}>
-                    <Icon
-                        data={FullScreen}
-                        width={FULL_SCREEN_ICON_SIZE}
-                        height={FULL_SCREEN_ICON_SIZE}
-                        className={b('icon')}
-                    />
-                </div>
+                {children({className: b('inline-media')})}
+                {showFullScreenIcon && (
+                    <div className={b('icon-wrapper')} onClickCapture={openModal}>
+                        <Icon
+                            data={FullScreen}
+                            width={FULL_SCREEN_ICON_SIZE}
+                            height={FULL_SCREEN_ICON_SIZE}
+                            className={b('icon')}
+                        />
+                    </div>
+                )}
             </div>
             {isOpened && (
                 <Modal open={isOpened} onClose={closeModal} className={b('modal')}>

src/components/FullscreenMedia/FullScreenMedia.tsx

@@ -10,7 +10,6 @@ $block: '.#{$ns}meta-info';
     align-items: center;
     font-weight: 500;
 
-    margin: $indentXS $indentXS 0 0;
     color: var(--pc-media-card-meta-info-color);
 
     &__item:not(:first-child) {

src/components/MetaInfo/MetaInfo.scss

@@ -1,17 +1,18 @@
 import React from 'react';
 
+import {ClassNameProps} from 'src/models';
 import {block} from '../../utils';
 
 import './MetaInfo.scss';
 
 const b = block('meta-info');
 
-export interface MetaInfpoProps {
+export interface MetaInfpoProps extends ClassNameProps {
     items: string[];
 }
 
-const MetaInfo = ({items}: MetaInfpoProps) => (
-    <div className={b()}>
+const MetaInfo = ({items, className}: MetaInfpoProps) => (
+    <div className={b(null, className)}>
         {items.map((metaInfoItem) => (
             <div key={metaInfoItem} className={b('item')}>
                 {metaInfoItem}

src/components/MetaInfo/MetaInfo.tsx

@@ -1,5 +1,6 @@
 import React, {useRef, useState, useCallback, useEffect} from 'react';
 import _ from 'lodash';
+import {v4 as uuidv4} from 'uuid';
 import {Icon} from '@gravity-ui/uikit';
 
 import {block, getPageSearchParams} from '../../utils';
@@ -20,7 +21,6 @@ export const AUTOPLAY_ATTRIBUTES = {
 };
 
 const b = block('VideoBlock');
-const iframeId = 'video-block';
 
 function getVideoSrc(stream?: string, record?: string) {
     if (!stream && !record) {
@@ -65,7 +65,7 @@ const VideoBlock = (props: VideoBlockProps) => {
     const [hidePreview, setHidePreview] = useState(false);
     const norender = (!stream && !record) || !src;
     const [currentHeight, setCurrentHeight] = useState(height || undefined);
-    const fullId = `${iframeId}-${id || src}`;
+    const fullId = id || uuidv4();
     const onPreviewClick = useCallback(() => {
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${getPageSearchParams({
@@ -96,12 +96,9 @@ const VideoBlock = (props: VideoBlockProps) => {
             return;
         }
 
-        const prevPageVideo = document.getElementById(fullId) as HTMLVideoElement;
         const fullSrc = `${src}?${getPageSearchParams(attributes || {})}`;
 
-        if (prevPageVideo && !fullScreen) {
-            prevPageVideo.src = fullSrc;
-        } else if (ref.current) {
+        if (ref.current && !iframeRef.current) {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
             iframe.src = fullSrc;

src/components/VideoBlock/VideoBlock.tsx

@@ -7,6 +7,7 @@ import {
     NewsCard,
     TutorialCard,
     CardWithImage,
+    LayoutItem,
     BackgroundCard,
     Content,
     Quote,
@@ -75,6 +76,10 @@ export const subBlockMap = {
     [SubBlockType.MediaCard]: MediaCard,
     [SubBlockType.BannerCard]: BannerCard,
     [SubBlockType.NewsCard]: NewsCard,
+    [SubBlockType.LayoutItem]: LayoutItem,
+    /**
+     * @deprecated Use LayoutItem
+     */
     [SubBlockType.CardWithImage]: CardWithImage,
     [SubBlockType.BackgroundCard]: BackgroundCard,
     [SubBlockType.BasicCard]: BasicCard,