@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/EmbedBlock/EmbedBlock.tsx

@@ -0,0 +1,236 @@
+import React, { useState, useEffect, useRef } from 'react'
+
+import enableInlineVideo from 'iphone-inline-video'
+
+import { Image } from '../Image'
+import { Popover } from '../Popover'
+import { MediaCaption } from '../MediaCaption'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import viewportSize from '../utils/viewportSize'
+import DangerousHTML from '../utils/DangerousHtml'
+
+import { MediaQuerySizes } from '../constants'
+
+import { EmbedBlockProps } from './EmbedBlock.types'
+
+import styles from './EmbedBlock.module.css'
+
+export const EmbedBlock: React.FC<EmbedBlockProps> = ({
+  block,
+  block: {
+    data,
+    data: {
+      display,
+      only_on: onlyOn,
+      provider,
+      cc,
+      optimized,
+      small_url: small,
+      large_url: large
+    }
+  },
+  styleContext,
+  children
+}) => {
+  const [isPopoverShown, setIsPopoverShown] = useState(false)
+
+  const [videoFrozen, setVideoFrozen] = useState(false)
+  const videoElem = useRef(null)
+  const wrapperElem = useRef(null)
+
+  const handleVideoTouch = (): void => {
+    videoElem.current.play()
+    setVideoFrozen(false)
+  }
+
+  const handleVideoError = (): void => {
+    const video = videoElem.current
+
+    video.setAttribute('poster', video.dataset.gif)
+
+    setVideoFrozen(false)
+  }
+
+  useEffect(() => {
+    const video = videoElem.current
+
+    if (block.type === 'gif' && video) {
+      const { width: viewportWidth } = viewportSize()
+
+      enableInlineVideo(video)
+
+      if (viewportWidth >= MediaQuerySizes.MOBILE) {
+        video.setAttribute('autoplay', true)
+        video.play()
+      } else {
+        setVideoFrozen(true)
+        video.pause()
+        video.addEventListener('touchstart', handleVideoTouch)
+      }
+
+      video.addEventListener('error', handleVideoError)
+    }
+
+    return (): void => {
+      if (video) {
+        video.removeEventListener('touchstart', handleVideoTouch)
+        video.removeEventListener('error', handleVideoError)
+      }
+    }
+  }, [])
+
+  const renderCC = (context?: string | string[]): JSX.Element => (
+    <MediaCaption
+      credit={data.credit}
+      caption={data.caption}
+      styleContext={context || styleContext}
+    />
+  )
+
+  const renderEmbed = (style: any): JSX.Element[] | JSX.Element => {
+    const { html } = block.data
+
+    switch (block.type) {
+      case 'gif': {
+        return (
+          <div className={styles.figure}>
+            <div
+              className={styles.objectWrap}
+              style={style}
+              ref={wrapperElem}
+              data-frozen={videoFrozen}
+            >
+              <video
+                playsInline
+                muted
+                loop
+                autoPlay
+                preload="metadata"
+                data-gif={block.data.gif_url}
+                ref={videoElem}
+              >
+                <source
+                  src={`https://meduza.io${block.data.mp4_url}`}
+                  type="video/mp4"
+                />
+              </video>
+            </div>
+          </div>
+        )
+      }
+      case 'image': {
+        return (
+          <div className={styles.figure}>
+            {(small || optimized) && (
+              <Image
+                fullscreen={block.data.fullscreen}
+                source={!optimized && [small, large]}
+                optimized={block.data.optimized}
+                width={block.data.width}
+                height={block.data.height}
+                alt={block.data.caption}
+                display={block.data.display}
+                lazy={block.data.lazy}
+              />
+            )}
+          </div>
+        )
+      }
+      case 'game_embed': {
+        return (
+          <div className={styles.gameEmbed}>
+            <iframe
+              src={block.data.game_src}
+              id={block.data.game_id}
+              title="Game embed"
+            />
+          </div>
+        )
+      }
+
+      default: {
+        return (
+          <div className={styles.object}>
+            <div className={styles.wrapper} style={style}>
+              <DangerousHTML className={styles.objectWrap} html={html} />
+            </div>
+          </div>
+        )
+      }
+    }
+  }
+
+  const style: React.CSSProperties = {}
+
+  let isProportional
+
+  // @TODO: Разобраться зачем это было нужно
+  // const className = Object.keys(styleContext)
+  //   .filter(key => key.startsWith('isIn') && styles[key])
+  //   .reduce((acc, key) => {
+  //     acc.push([styles[key], true])
+
+  //     return acc
+  //   }, [])
+
+  /* eslint-disable react/no-array-index-key, no-mixed-operators */
+  if (block.data.height && block.data.width) {
+    style.paddingBottom = `${(block.data.height / block.data.width) * 100}%`
+    style.height = 0
+
+    isProportional = true
+  }
+
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles.cc, cc],
+    [styles[display], !!display && styles[display]],
+    [styles[provider], !!provider && !!styles[provider]],
+    [styles[onlyOn], !!onlyOn && styles[onlyOn]],
+    [styles.proportional, !!styles.proportional && isProportional]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <figure className={makeClassName(classNames)}>
+      {children && (
+        <div className={styles.object}>
+          <div className={styles.wrapper} style={style}>
+            <div className={styles.objectWrap}>{children}</div>
+          </div>
+        </div>
+      )}
+
+      {!children && renderEmbed(style)}
+
+      {cc === 'default' && <figcaption>{renderCC()}</figcaption>}
+
+      {cc === 'button' && (
+        <button
+          className={styles.control}
+          type="button"
+          aria-label="Open"
+          onClick={(): void => {
+            setIsPopoverShown(!isPopoverShown)
+          }}
+        />
+      )}
+
+      {cc === 'button' && isPopoverShown && (
+        <Popover
+          onClose={(): void => {
+            setIsPopoverShown(false)
+          }}
+        >
+          {renderCC('isInPopover')}
+        </Popover>
+      )}
+    </figure>
+  )
+}

package/src/EmbedBlock/EmbedBlock.types.ts

@@ -0,0 +1,5 @@
+export interface EmbedBlockProps {
+  block: any
+  styleContext?: string[] | string
+  lang?: 'ru' | 'en'
+}

package/src/EmbedBlock/IframeBlock.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from 'react'
+import { EmbedBlockProps } from './EmbedBlock.types'
+
+import { EmbedBlock } from './EmbedBlock'
+
+export const IframeBlock: React.FC<EmbedBlockProps> = ({
+  block,
+  block: { id },
+  styleContext,
+  lang = 'ru'
+}) => {
+  const element = useRef(null)
+
+  const renderIframe = (): void => {
+    const rootEl = document.createElement('div')
+    const contentEl = document.createElement('div')
+    const scriptEl = document.createElement('script')
+    const style = document.createElement('style')
+    const range = document.createRange()
+
+    range.setStart(contentEl, 0)
+    contentEl.setAttribute('id', 'content')
+    scriptEl.textContent = `
+        function getDocHeight() {
+            var doc = document;
+            var body = doc.body;
+            var html = doc.documentElement;
+            var height = Math.max( body.scrollHeight, body.offsetHeight,
+                html.clientHeight, html.scrollHeight, html.offsetHeight );
+
+            doc.body.style.margin="0";
+
+            return document.getElementById('content') ? document.getElementById('content').offsetHeight : height;
+        }
+
+        function sendDocHeightMsg() {
+            var height = getDocHeight();
+            var message = JSON.stringify({
+                action: {
+                    type: "UPDATE_HEIGHT",
+                    payload: {
+                        id: "${block.id}",
+                        height: height
+                    }
+                }
+            });
+            parent.postMessage("mdzMaterialEmbedHeight=" + message, '*');
+        }
+
+        setInterval(sendDocHeightMsg, 300);
+        `
+
+    style.type = 'text/css'
+    style.innerHTML =
+      block.type === 'embed_code'
+        ? '.twitter-tweet { padding-top: 15px; margin: 0 !important; }'
+        : '.twitter-tweet { margin: 0 !important; } .fb-post { display: block; } .instagram-media { min-width: 0 !important; }'
+
+    contentEl.appendChild(range.createContextualFragment(block.data.html))
+    rootEl.appendChild(scriptEl)
+    rootEl.appendChild(contentEl)
+    contentEl.appendChild(style)
+
+    const frame = element.current.querySelector('iframe').contentDocument
+
+    frame.open()
+    frame.close()
+    frame.documentElement.setAttribute('lang', lang)
+    frame.body.appendChild(rootEl)
+  }
+
+  useEffect(() => {
+    renderIframe()
+  }, [])
+
+  return (
+    <EmbedBlock block={block} styleContext={styleContext}>
+      <div
+        ref={element}
+        dangerouslySetInnerHTML={{
+          __html: `<iframe id=${id} frameBorder="0" scrolling="no"></iframe>`
+        }}
+      />
+    </EmbedBlock>
+  )
+}

package/src/EmbedBlock/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { EmbedBlockProps } from './EmbedBlock.types'
+
+import { EmbedBlock } from './EmbedBlock'
+import { IframeBlock } from './IframeBlock'
+
+export const EmbedBlockContainer: React.FC<EmbedBlockProps> = ({
+  block,
+  styleContext,
+  lang
+}) => {
+  if (block.data.wrap_with_iframe) {
+    return <IframeBlock block={block} styleContext={styleContext} lang={lang} />
+  }
+  return <EmbedBlock block={block} styleContext={styleContext} />
+}

package/src/EmbedBlock/mock.json

@@ -0,0 +1,89 @@
+{
+  "blocks": [
+    {
+      "type": "embed_code",
+      "data": {
+        "provider": "custom",
+        "html": "<iframe src=\"https://ourworldindata.org/grapher/biweekly-confirmed-covid-19-cases?year=latest&time=2020-03-24..latest&region=Europe\" loading=\"lazy\" style=\"width: 100%; height: 600px; border: 0px none;\"></iframe>",
+        "wrap_with_iframe": false,
+        "cc": "none",
+        "display": "default"
+      },
+      "id": "1-7-75df999d0a038a9f8d0e4e821a64dc5aa77babd89ff6cc21da375be7724eae43"
+    },
+    {
+      "type": "image",
+      "data": {
+        "lazy": true,
+        "fullscreen": false,
+        "small_url": "/image/attachments/images/005/990/548/small/fpRHmfXNLJ9Q4P3Bn7wN-g.jpg",
+        "large_url": "/image/attachments/images/005/990/548/large/fpRHmfXNLJ9Q4P3Bn7wN-g.jpg",
+        "elarge_url": "/image/attachments/images/005/990/548/elarge/fpRHmfXNLJ9Q4P3Bn7wN-g.jpg",
+        "width": 960,
+        "height": 1280,
+        "cc": "none",
+        "display": "default",
+        "optimized": {
+          "original": "https://meduza.io/impro/LoZVAfuGYyvmtVNfrOXTDbaLYOK-kg49M3iWlj-U5lU/fill/2670/0/ce/0/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+          "w325": {
+            "1x": "https://meduza.io/impro/Yw7kaa11jT4hvWkGjroM517QFJfzOC75BWQEk18bhPg/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "2x": "https://meduza.io/impro/mGDYvVZMBpoHf-Rz-ISXTcmrRBpGQkOcBA4d47Bt2pM/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/dbY8Jy4cVx5v-zB4HYR9j3XkwrDG6uTOBcZdHi2NPS0/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/nm4UPhGNVMuWpAFlCn9G638Vl8a0o0IiBSbjTi_9eFk/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp"
+          },
+          "w520": {
+            "1x": "https://meduza.io/impro/NjQRgtAWCcswx4C2DGeHsEN9-AsmIpptmozGdF__OKw/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "2x": "https://meduza.io/impro/Bhwz3BKBkSTcxfuzc32D2370rbX0Ht2Kh-eikynQbOY/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/r4_0yiXyZ_Pz4oJiK97hW8GOWZQYD2dwEiDaZh5ZyS0/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/FadkbtcJskqqUcDiFbws45lkMh7SC1RZXGgKW9xSrzU/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp"
+          },
+          "w650": {
+            "1x": "https://meduza.io/impro/mGDYvVZMBpoHf-Rz-ISXTcmrRBpGQkOcBA4d47Bt2pM/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "2x": "https://meduza.io/impro/nWkvtZraUy8sT3dkOFwxgADnSyGRlpcNd6zHj88Mebk/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/nm4UPhGNVMuWpAFlCn9G638Vl8a0o0IiBSbjTi_9eFk/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/E6RwwQ0UASGxcU6JATjZ43DTnE0vKee6uMliyrxE3xs/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp"
+          },
+          "w980": {
+            "1x": "https://meduza.io/impro/dQxoS_db8_rSK-9dMD-r5Vfr3CLcfBvx1zBXQtdtjXo/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "2x": "https://meduza.io/impro/pwzmGW1tEa9D4d5b5kWBaPAiUUgAkoWPOvEsayapGeE/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/1gkt0hXv0YSpebxhIQlzx4PI0HXE2FfYl_LmRf88jXg/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/OXg6ywUZGs-3Ba8bFdaRHCs4cNm1kQZOlouqC82ZURc/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp"
+          },
+          "w1335": {
+            "1x": "https://meduza.io/impro/peDg3-37xsptF6z8Yz9MnCrl6ZtRg0mE6nufDFvS5R4/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "2x": "https://meduza.io/impro/KsCUeiJYYp7TS28IhklBpBgFadj6quvR7cznCeBYij4/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/FRjotreXOIq_YJZBSKk7upk8MolV3dcV0hFY2exuKUg/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/M8Ucsc78O5yE0hrED2ERqO2xR-7aapZcOrv6uFBousk/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNS85/OTAvNTQ4L29yaWdp/bmFsL2ZwUkhtZlhO/TEo5UTRQM0JuN3dO/LWcuanBn.webp"
+          }
+        }
+      },
+      "id": "9-5966c9fae73e002d15a7bee5884924f58c5cf5f11fb40883bc4dc8a9f4cd5083"
+    },
+    {
+      "type": "embed",
+      "data": {
+        "provider": "youtube",
+        "html": "<iframe src=\"https://www.youtube.com/embed/dVP7PNRx8Mw?feature=oembed&amp;iv_load_policy=3&amp;showinfo=0&amp;color=white\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen style=\"width: 100%; height: 100%; position: absolute\"></iframe>",
+        "width": 480,
+        "height": 270,
+        "lazy": true,
+        "wrap_with_iframe": false,
+        "credit": "SearchlightPictures",
+        "cc": "default",
+        "display": "full"
+      },
+      "id": "6-a6d96f7079dcfcdbb92fa3cd7d541e75a6ca25901d795ea1a5f14e64f5b338fe"
+    },
+    {
+      "type": "embed",
+      "data": {
+        "provider": "twitter",
+        "html": "<blockquote class=\"twitter-tweet\"><p lang=\"ru\" dir=\"ltr\">Вышел трейлер «Дюны». <a href=\"https://t.co/8fzlIDFSFp\">pic.twitter.com/8fzlIDFSFp</a></p>&mdash; YamiEA (@brovitranduila) <a href=\"https://twitter.com/brovitranduila/status/1303740646226882561?ref_src=twsrc%5Etfw\">September 9, 2020</a></blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n",
+        "wrap_with_iframe": true,
+        "cc": "none",
+        "display": "default"
+      },
+      "id": "3-6a50ce5056f3f6f15c48f25a972d9553fd0d5b961e64b4885d6ad34a1f211b73"
+    }
+  ]
+}

package/src/GroupedBlock/GroupedBlock.module.css

@@ -0,0 +1,94 @@
+@import '../vars.css';
+
+.root {
+  max-width: 644px;
+  margin: 15px auto 0;
+
+  @media $portraitTablet {
+    max-width: none;
+    margin-top: 25px;
+    margin-bottom: 20px;
+  }
+}
+
+.hasFigcaption {
+  margin-bottom: 15px;
+}
+
+.hasFigcaption + .root {
+  @media $portraitTablet {
+    margin-top: 25px;
+  }
+}
+
+.hasFigcaption .item:last-child {
+  margin-bottom: 0;
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  @media $portraitTablet {
+    flex-direction: row;
+  }
+}
+
+.item {
+  flex-grow: 1;
+
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+
+  @media $portraitTablet {
+    min-width: 0;
+    max-width: none;
+    margin-bottom: 0;
+  }
+}
+
+.item + .item {
+  @media $portraitTablet {
+    margin-left: 15px;
+  }
+}
+
+.figcaption {
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* DISPLAY */
+.default {
+  @media $portraitTablet {
+    max-width: 650px;
+  }
+}
+
+.full {
+  max-width: 980px;
+}
+
+.super_full {
+  max-width: 1680px;
+}
+
+/* VISIBILITY */
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}
+

package/src/GroupedBlock/GroupedBlock.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}

package/src/GroupedBlock/GroupedBlock.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { GroupedBlock } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './GroupedBlock.stories.module.css'
+
+export default {
+  title: 'Main / GroupedBlock',
+  component: GroupedBlock,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <GroupedBlock />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/GroupedBlock/GroupedBlock.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { GroupedBlock } from './'
+import { GroupedBlockProps } from './GroupedBlock.types'
+import styles from './GroupedBlock.module.css'
+
+describe('Grouped Block', () => {
+  let props: GroupedBlockProps
+
+  const renderComponent = () => render(<GroupedBlock {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const groupedBlock = getByTestId('grouped-block')
+
+    expect(groupedBlock).toHaveClass(styles.root)
+  })
+})

package/src/GroupedBlock/GroupedBlock.types.ts

@@ -0,0 +1,4 @@
+export interface GroupedBlockProps {
+  block: any,
+  styleContext?: string[] | string
+}

package/src/GroupedBlock/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { GroupedBlockProps } from './GroupedBlock.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import { EmbedBlockContainer } from '../EmbedBlock'
+import { MediaCaption } from '../MediaCaption'
+
+import styles from './GroupedBlock.module.css'
+
+export const GroupedBlock: React.FC<GroupedBlockProps> = ({
+  block,
+  block: { only_on: onlyOn },
+  styleContext
+}) => {
+  const maxHeight = Math.min(...block.data.map(item => item.data.height))
+
+  const normalizedBoxesWidth = block.data.map(
+    item => item.data.width / (item.data.height / maxHeight)
+  )
+
+  const sumWidth = normalizedBoxesWidth.reduce((sum, x) => sum + x)
+
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], true],
+    [styles.hasFigcaption, block.cc === 'default'],
+    [styles[block.display], !!block.display && styles[block.display]]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="grouped-block" className={makeClassName(classNames)}>
+      <div className={styles.items}>
+        {block.data.map((item, index) => {
+          const percentWidth = (normalizedBoxesWidth[index] / sumWidth) * 100
+
+          return (
+            <div
+              className={styles.item}
+              key={item.id}
+              style={{ width: `${percentWidth}%` }}
+            >
+              <EmbedBlockContainer
+                block={item}
+                styleContext="isInGroupedBlock"
+              />
+            </div>
+          )
+        })}
+      </div>
+      {block.cc && (
+        <figcaption className={styles.figcaption}>
+          <MediaCaption
+            credit={block.credit}
+            caption={block.caption}
+            styleContext={styleContext}
+          />
+        </figcaption>
+      )}
+    </div>
+  )
+}