feat(Media): add fullscreen video (#345)

Author: aeksandla

README.md

@@ -184,7 +184,7 @@ Sub-blocks are components that can be used in the block `children` property. In
    - Add it to `enum` or `selectCases` in the `schema/index.ts` file.
 
 6. In the block directory, add the `README.md` file with a description of input parameters.
-7. In the block directory add storybook demo in `__stories__` folder. (All demo content for story should be placed in `data.json` at story dir)
+7. In the block directory add storybook demo in `__stories__` folder. All demo content for story should be placed in `data.json` at story dir. The generic `Story` must accept the type of block props, otherwise incorrect block props will be displayed in Storybook.
 
 ### Themes
 

src/blocks/Media/README.md

@@ -8,7 +8,7 @@ Media block
 
 [`button: Button` — Button](?path=/story/information--common-types&viewMode=docs#button---button)
 
-[`media: Media` — Media description](?path=/story/information--common-types&viewMode=docs#media---picvideodatalens)
+[`media: Media` — Media description](?path=/story/information--common-types&viewMode=docs#common-types)
 
 `direction: 'media-content' | 'content-media'` — Relative position of media and content.
 

src/blocks/Tabs/Tabs.tsx

@@ -3,7 +3,7 @@ import React, {Fragment, useContext, useRef, useState} from 'react';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';
-import FullScreenImage from '../../components/FullscreenImage/FullscreenImage';
+import FullscreenImage from '../../components/FullscreenImage/FullscreenImage';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import Media from '../../components/Media/Media';
 import {getHeight} from '../../components/VideoBlock/VideoBlock';
@@ -95,7 +95,7 @@ export const TabsBlock = ({
             </div>
             {imageProps && (
                 <Fragment>
-                    <FullScreenImage {...imageProps} imageClassName={b('image')} />
+                    <FullscreenImage {...imageProps} imageClassName={b('image')} />
                 </Fragment>
             )}
             {activeTabData?.caption && <p className={b('caption')}>{activeTabData.caption}</p>}

…nts/FullscreenImage/FullScreenImage.scss …nts/FullscreenImage/FullscreenImage.scsssrc/components/FullscreenImage/FullScreenImage.scss renamed to src/components/FullscreenImage/FullscreenImage.scss src/components/FullscreenImage/FullScreenImage.scss renamed to src/components/FullscreenImage/FullscreenImage.scss

@@ -8,7 +8,7 @@ import Image, {ImageProps} from '../Image/Image';
 
 import i18n from './i18n';
 
-import './FullScreenImage.scss';
+import './FullscreenImage.scss';
 
 export interface FullScreenImageProps extends ImageProps {
     imageClassName?: string;
@@ -20,22 +20,22 @@ const b = block('FullScreenImage');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 
-const FullScreenImage = (props: FullScreenImageProps) => {
+const FullscreenImage = (props: FullScreenImageProps) => {
     const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt')} = props;
     const [isOpened, setIsOpened] = useState(false);
     const [isMouseEnter, setIsMouseEnter] = useState(false);
 
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
-    const showFullScreenIcon = () => setIsMouseEnter(true);
-    const hideFullScreenIcon = () => setIsMouseEnter(false);
+    const showFullscreenIcon = () => setIsMouseEnter(true);
+    const hideFullscreenIcon = () => setIsMouseEnter(false);
 
     return (
         <div className={b()}>
             <div
                 className={b('image-wrapper')}
-                onMouseEnter={showFullScreenIcon}
-                onMouseLeave={hideFullScreenIcon}
+                onMouseEnter={showFullscreenIcon}
+                onMouseLeave={hideFullscreenIcon}
             >
                 <Image
                     {...props}
@@ -72,4 +72,4 @@ const FullScreenImage = (props: FullScreenImageProps) => {
     );
 };
 
-export default FullScreenImage;
+export default FullscreenImage;

src/components/FullscreenImage/FullscreenImage.tsx

@@ -3,18 +3,18 @@ import React from 'react';
 import {Meta, Story} from '@storybook/react/types-6-0';
 
 import {COMPONENTS, MEDIA} from '../../../demo/constants';
-import FullScreenImage, {FullScreenImageProps} from '../FullscreenImage';
+import FullscreenImage, {FullScreenImageProps} from '../FullscreenImage';
 
 import data from './data.json';
 
 export default {
-    component: FullScreenImage,
-    title: `${COMPONENTS}/${MEDIA}/FullScreenImage`,
+    component: FullscreenImage,
+    title: `${COMPONENTS}/${MEDIA}/FullscreenImage`,
 } as Meta;
 
 const DefaultTemplate: Story<FullScreenImageProps> = (args) => (
     <div style={{maxWidth: '500px'}}>
-        <FullScreenImage {...args} />
+        <FullscreenImage {...args} />
     </div>
 );
 

src/components/FullscreenImage/__stories__/FullScreenImage.stories.tsx

@@ -7,15 +7,24 @@ import {FullScreen, PreviewClose} from '../../icons';
 import {block} from '../../utils';
 import {MediaAllProps} from '../Media/Media';
 
-import './FullScreenMedia.scss';
+import './FullscreenMedia.scss';
 
 export type ChildMediaRenderProps = Pick<
     MediaAllProps,
-    'fullScreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'
+    | 'fullScreen'
+    | 'fullscreen'
+    | 'imageClassName'
+    | 'videoClassName'
+    | 'youtubeClassName'
+    | 'className'
 >;
 
 export interface FullScreenMediaProps {
+    /**
+     * @deprecated use showFullscreenIcon
+     */
     showFullScreenIcon?: boolean;
+    showFullscreenIcon?: boolean;
     children: (props?: ChildMediaRenderProps) => JSX.Element;
 }
 
@@ -25,7 +34,15 @@ const CLOSE_ICON_SIZE = 30;
 
 const getMediaClass = (type: string) => b('modal-media', {type});
 
-const FullScreenMedia = ({children, showFullScreenIcon = true}: FullScreenMediaProps) => {
+// TODO delete along with showFullScreenIcon props
+const getShowFullscreenIcon = ({showFullScreenIcon = true, showFullscreenIcon = true}) =>
+    showFullScreenIcon && showFullscreenIcon;
+
+const FullscreenMedia = ({
+    children,
+    showFullScreenIcon = true,
+    showFullscreenIcon = true,
+}: FullScreenMediaProps) => {
     const [isOpened, setIsOpened] = useState(false);
     const isMobile = useContext(MobileContext);
 
@@ -43,7 +60,7 @@ const FullScreenMedia = ({children, showFullScreenIcon = true}: FullScreenMediaP
         <div className={b()}>
             <div className={b('media-wrapper')} onClickCapture={openModal}>
                 {children({className: b('inline-media')})}
-                {showFullScreenIcon && (
+                {getShowFullscreenIcon({showFullScreenIcon, showFullscreenIcon}) && (
                     <div className={b('icon-wrapper')} onClickCapture={openModal}>
                         <Icon
                             data={FullScreen}
@@ -78,4 +95,4 @@ const FullScreenMedia = ({children, showFullScreenIcon = true}: FullScreenMediaP
     );
 };
 
-export default FullScreenMedia;
+export default FullscreenMedia;

…nts/FullscreenMedia/FullScreenMedia.scss …nts/FullscreenMedia/FullscreenMedia.scsssrc/components/FullscreenMedia/FullScreenMedia.scss renamed to src/components/FullscreenMedia/FullscreenMedia.scss src/components/FullscreenMedia/FullScreenMedia.scss renamed to src/components/FullscreenMedia/FullscreenMedia.scss

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {Meta, Story} from '@storybook/react/types-6-0';
+
+import {COMPONENTS, MEDIA} from '../../../demo/constants';
+import Media from '../../Media/Media';
+import FullscreenMedia, {FullScreenMediaProps} from '../FullscreenMedia';
+
+import data from './data.json';
+
+export default {
+    component: FullscreenMedia,
+    title: `${COMPONENTS}/${MEDIA}/FullscreenMedia`,
+} as Meta;
+
+const DefaultTemplate: Story<FullScreenMediaProps> = (args) => (
+    <div style={{maxWidth: '500px'}}>
+        <FullscreenMedia {...args}>
+            {(fullscreenMediaProps = {}) => (
+                <Media {...data.default.content} {...fullscreenMediaProps} />
+            )}
+        </FullscreenMedia>
+    </div>
+);
+
+export const Default = DefaultTemplate.bind({});
+
+Default.args = {};