Skip to content

Commit 4abebb5

Browse files
authored
Add layout item (#132)
feat: add layout item and deprecate cardWithImage
1 parent b9815e3 commit 4abebb5

File tree

29 files changed

+403
-121
lines changed

29 files changed

+403
-121
lines changed

package-lock.json

Lines changed: 17 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@
5656
"react-waypoint": "^10.1.0",
5757
"sanitize-html": "^2.6.1",
5858
"snakecase-keys": "^5.1.0",
59-
"typograf": "^6.14.0"
59+
"typograf": "^6.14.0",
60+
"uuid": "^9.0.0"
6061
},
6162
"peerDependencies": {
6263
"react": "^16.0.0 || ^17.0.0",
@@ -87,6 +88,7 @@
8788
"@types/react-slick": "^0.23.7",
8889
"@types/react-transition-group": "^4.4.4",
8990
"@types/sanitize-html": "^2.6.0",
91+
"@types/uuid": "^9.0.0",
9092
"eslint": "^7.32.0",
9193
"eslint-plugin-local": "./eslint-plugin-local",
9294
"eslint-plugin-testing-library": "^5.9.1",

src/blocks/CardLayout/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ The following blocks are currently supported:
2020
- [`Partner` — Partner card](?path=/story/components-cards-partner--default&viewMode=docs)
2121
- [`Price Detailed` — Pricing](?path=/story/components-cards-pricedetailed--marked-list&viewMode=docs)
2222
- [`BackgroundCard` — Background card](?path=/story/components-cards-backgroundcard--default&viewMode=docs)
23-
- [`CardWithImage` — Card with a picture above the title](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
23+
- [`CardWithImage` — Card with a picture above the title (deprecated)](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
24+
- [`LayoutItem` — Component part of `Layout` component, consists with `Media` and `Content`](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
2425
- [`NewsCard` — News card](?path=/story/components-cards-newscard--default&viewMode=docs)
2526
- [`TutorialCard` — Card with an icon](?path=/story/components-cards-tutorialcard--default&viewMode=docs)

src/blocks/Slider/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ The following blocks are currently supported:
3838
- [`Partner` — Partner card](?path=/story/components-cards-partner--default&viewMode=docs)
3939
- [`Price Detailed` — Pricing](?path=/story/components-cards-pricedetailed--marked-list&viewMode=docs)
4040
- [`BackgroundCard` — Background card](?path=/story/components-cards-backgroundcard--default&viewMode=docs)
41-
- [`CardWithImage` — Card with a picture above the title](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
41+
- [`CardWithImage` — Card with a picture above the title (deprecated)](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
42+
- [`LayoutItem``Media` + `Content` components in one card-like view](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
4243
- [`MediaCard` — Card with an image](?path=/story/блоки-media--default&viewMode=docs)
4344
- [`NewsCard` — News card](?path=/story/components-cards-newscard--default&viewMode=docs)
4445
- [`TutorialCard` — Card with an icon](?path=/story/components-cards-tutorialcard--default&viewMode=docs)

src/components/FullscreenMedia/FullScreenMedia.scss

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
$block: '.#{$ns}full-screen-media';
55
$closeButtonSize: 36px;
66
$modalMediaHeight: 70vh;
7+
$modalYoutubeWidth: 70vw;
78

89
%modal-media {
910
display: block;
@@ -27,6 +28,10 @@ $modalMediaHeight: 70vh;
2728
position: relative;
2829
}
2930

31+
&__inline-media {
32+
transform: translateZ(0);
33+
}
34+
3035
&__modal-media {
3136
border-radius: $borderRadius;
3237

@@ -41,8 +46,8 @@ $modalMediaHeight: 70vh;
4146
&_type_youtube {
4247
@extend %modal-media;
4348

44-
width: calc(#{$modalMediaHeight} * 16 / 9);
45-
height: $modalMediaHeight;
49+
width: $modalYoutubeWidth;
50+
height: calc(#{$modalYoutubeWidth} * 9 / 16);
4651
}
4752
}
4853

@@ -90,11 +95,7 @@ $modalMediaHeight: 70vh;
9095
}
9196
}
9297

93-
@media (max-width: map-get($gridBreakpoints, 'lg')) {
94-
&__media-wrapper {
95-
pointer-events: none;
96-
}
97-
98+
@media (max-width: map-get($gridBreakpoints, 'sm')) {
9899
&__icon-wrapper {
99100
display: none;
100101
}

src/components/FullscreenMedia/FullScreenMedia.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,17 @@ import {Icon, Modal} from '@gravity-ui/uikit';
44
import {block} from '../../utils';
55
import {PreviewClose, FullScreen} from '../../icons';
66
import {MediaAllProps} from '../Media/Media';
7-
import {MobileContext} from '../../../src/context/mobileContext';
7+
import {MobileContext} from '../../context/mobileContext';
88

99
import './FullScreenMedia.scss';
1010

1111
export type ChildMediaRenderProps = Pick<
1212
MediaAllProps,
13-
'fullScreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName'
13+
'fullScreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'
1414
>;
1515

1616
export interface FullScreenMediaProps {
17+
showFullScreenIcon?: boolean;
1718
children: (props?: ChildMediaRenderProps) => JSX.Element;
1819
}
1920

@@ -23,7 +24,7 @@ const CLOSE_ICON_SIZE = 30;
2324

2425
const getMediaClass = (type: string) => b('modal-media', {type});
2526

26-
const FullScreenMedia = ({children}: FullScreenMediaProps) => {
27+
const FullScreenMedia = ({children, showFullScreenIcon = true}: FullScreenMediaProps) => {
2728
const [isOpened, setIsOpened] = useState(false);
2829
const isMobile = useContext(MobileContext);
2930

@@ -40,15 +41,17 @@ const FullScreenMedia = ({children}: FullScreenMediaProps) => {
4041
return (
4142
<div className={b()}>
4243
<div className={b('media-wrapper')} onClickCapture={openModal}>
43-
{children()}
44-
<div className={b('icon-wrapper')} onClickCapture={openModal}>
45-
<Icon
46-
data={FullScreen}
47-
width={FULL_SCREEN_ICON_SIZE}
48-
height={FULL_SCREEN_ICON_SIZE}
49-
className={b('icon')}
50-
/>
51-
</div>
44+
{children({className: b('inline-media')})}
45+
{showFullScreenIcon && (
46+
<div className={b('icon-wrapper')} onClickCapture={openModal}>
47+
<Icon
48+
data={FullScreen}
49+
width={FULL_SCREEN_ICON_SIZE}
50+
height={FULL_SCREEN_ICON_SIZE}
51+
className={b('icon')}
52+
/>
53+
</div>
54+
)}
5255
</div>
5356
{isOpened && (
5457
<Modal open={isOpened} onClose={closeModal} className={b('modal')}>

src/components/MetaInfo/MetaInfo.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ $block: '.#{$ns}meta-info';
1010
align-items: center;
1111
font-weight: 500;
1212

13-
margin: $indentXS $indentXS 0 0;
1413
color: var(--pc-media-card-meta-info-color);
1514

1615
&__item:not(:first-child) {

src/components/MetaInfo/MetaInfo.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React from 'react';
22

3+
import {ClassNameProps} from 'src/models';
34
import {block} from '../../utils';
45

56
import './MetaInfo.scss';
67

78
const b = block('meta-info');
89

9-
export interface MetaInfpoProps {
10+
export interface MetaInfpoProps extends ClassNameProps {
1011
items: string[];
1112
}
1213

13-
const MetaInfo = ({items}: MetaInfpoProps) => (
14-
<div className={b()}>
14+
const MetaInfo = ({items, className}: MetaInfpoProps) => (
15+
<div className={b(null, className)}>
1516
{items.map((metaInfoItem) => (
1617
<div key={metaInfoItem} className={b('item')}>
1718
{metaInfoItem}

src/components/VideoBlock/VideoBlock.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {useRef, useState, useCallback, useEffect} from 'react';
22
import _ from 'lodash';
3+
import {v4 as uuidv4} from 'uuid';
34
import {Icon} from '@gravity-ui/uikit';
45

56
import {block, getPageSearchParams} from '../../utils';
@@ -20,7 +21,6 @@ export const AUTOPLAY_ATTRIBUTES = {
2021
};
2122

2223
const b = block('VideoBlock');
23-
const iframeId = 'video-block';
2424

2525
function getVideoSrc(stream?: string, record?: string) {
2626
if (!stream && !record) {
@@ -65,7 +65,7 @@ const VideoBlock = (props: VideoBlockProps) => {
6565
const [hidePreview, setHidePreview] = useState(false);
6666
const norender = (!stream && !record) || !src;
6767
const [currentHeight, setCurrentHeight] = useState(height || undefined);
68-
const fullId = `${iframeId}-${id || src}`;
68+
const fullId = id || uuidv4();
6969
const onPreviewClick = useCallback(() => {
7070
if (iframeRef.current) {
7171
iframeRef.current.src = `${src}?${getPageSearchParams({
@@ -96,12 +96,9 @@ const VideoBlock = (props: VideoBlockProps) => {
9696
return;
9797
}
9898

99-
const prevPageVideo = document.getElementById(fullId) as HTMLVideoElement;
10099
const fullSrc = `${src}?${getPageSearchParams(attributes || {})}`;
101100

102-
if (prevPageVideo && !fullScreen) {
103-
prevPageVideo.src = fullSrc;
104-
} else if (ref.current) {
101+
if (ref.current && !iframeRef.current) {
105102
const iframe = document.createElement('iframe');
106103
iframe.id = fullId;
107104
iframe.src = fullSrc;

src/constructor-items.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
NewsCard,
88
TutorialCard,
99
CardWithImage,
10+
LayoutItem,
1011
BackgroundCard,
1112
Content,
1213
Quote,
@@ -75,6 +76,10 @@ export const subBlockMap = {
7576
[SubBlockType.MediaCard]: MediaCard,
7677
[SubBlockType.BannerCard]: BannerCard,
7778
[SubBlockType.NewsCard]: NewsCard,
79+
[SubBlockType.LayoutItem]: LayoutItem,
80+
/**
81+
* @deprecated Use LayoutItem
82+
*/
7883
[SubBlockType.CardWithImage]: CardWithImage,
7984
[SubBlockType.BackgroundCard]: BackgroundCard,
8085
[SubBlockType.BasicCard]: BasicCard,

0 commit comments

Comments
 (0)