@meduza/ui-kit-2 0.1.2 → 0.1.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/Button/Button.types.ts

@@ -1,3 +1,5 @@
+import React from 'react'
+
 export type ButtonThemes =
   | 'sand'
   | 'gold'
@@ -19,5 +21,5 @@ export interface ButtonProps {
   styleContext?: ButtonStyleContexts
   disabled?: boolean
   onClick?: () => void
-  children: JSX.Element[] | JSX.Element
+  children: React.ReactNode | JSX.Element[] | JSX.Element
 }

package/src/CardTitle/CardTitle.types.ts

@@ -1,8 +1,10 @@
 export interface CardTitleProps {
   block: {
-    index: number
-    text: string
-    only_on?: string
+    data: {
+      index: number
+      text: string
+      only_on?: string
+    }
   }
   styleContext?: string
 }

package/src/CardTitle/index.tsx

@@ -5,7 +5,9 @@ import makeClassName from '../utils/makeClassName'
 import styles from './CardTitle.module.css'
 
 export const CardTitle: React.FC<CardTitleProps> = ({
-  block: { only_on: onlyOn, index, text },
+  block: {
+    data: { only_on: onlyOn, index, text }
+  },
   styleContext
 }) => {
   return (

package/src/Cover/Cover.module.css

@@ -1,5 +1,111 @@
 @import '../vars.css';
 
 .root {
-  display: block;
+  position: relative;
+}
+
+.body {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+
+  min-height: 412px;
+  padding: 0 20px 12px;
+}
+
+.image {
+  position: relative;
+}
+
+.rich {
+  overflow: hidden;
+
+  margin: 0 -20px;
+
+  border-radius: 9px 9px 0 0;
+}
+
+.rich::after {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  content: '';
+
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px 10px 0 0;
+}
+
+.dark .body {
+  color: #000;
+}
+
+.light .body {
+  color: #fff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.control {
+  position: absolute;
+  z-index: 10;
+  right: 12px;
+  bottom: 12px;
+
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+
+  color: #fff;
+  border-width: 0;
+  border-radius: 14px;
+  outline: none;
+  background-color: rgba(0, 0, 0, 0.7);
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E %3Cg fill='%23FEFEFE' fill-rule='evenodd' opacity='.7'%3E %3Cpath d='M12.726 16H3.275A3.276 3.276 0 0 1 0 12.725v-9.45A3.276 3.276 0 0 1 3.275 0h9.45A3.275 3.275 0 0 1 16 3.275v9.45A3.275 3.275 0 0 1 12.726 16zm0-2c.703 0 1.274-.571 1.274-1.275v-9.45C14 2.571 13.429 2 12.726 2H3.275C2.57 2 2 2.571 2 3.275v9.45C2 13.429 2.57 14 3.275 14h9.45z' fill-rule='nonzero'/%3E %3Cpath d='M4.97 8.307l7.046 7.046a.5.5 0 0 0 .708-.707l-7.4-7.4a.5.5 0 0 0-.708 0l-3.97 3.97a.5.5 0 0 0 .708.707L4.97 8.307z' fill-rule='nonzero'/%3E %3Cpath d='M10.875 5.832l3.771 3.771a.5.5 0 0 0 .707-.707l-4.125-4.125a.5.5 0 0 0-.707 0l-4.19 4.19a.5.5 0 1 0 .707.707l3.837-3.836z' fill-rule='nonzero'/%3E %3Cpath d='M5.865 4.269a.894.894 0 1 1-1.787 0 .894.894 0 0 1 1.787 0'/%3E %3C/g%3E %3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.15);
+}
+
+.isInDynamicBlock .body {
+  padding: 0 12px 12px
+}
+
+.isInDynamicBlock::after {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  content: '';
+
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
 }

package/src/Cover/Cover.stories.module.css

@@ -2,4 +2,6 @@
 
 .root {
   display: block;
+
+  max-width: 650px;
 }

package/src/Cover/Cover.stories.tsx

@@ -4,6 +4,8 @@ import { Cover } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
 import styles from './Cover.stories.module.css'
 
+import mock from './mock.json'
+
 export default {
   title: 'Main / Cover',
   component: Cover,
@@ -16,7 +18,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <Cover />
+        <Cover block={mock} styleContext={['rich']} />
       </div>
     </>
   )

package/src/Cover/index.tsx

@@ -24,11 +24,9 @@ export const Cover: React.FC<CoverProps> = ({
   const [isPopoverShown, setIsPopoverShown] = useState(false)
 
   const style: React.CSSProperties = {}
-  let theme
 
   let classNames: (string[] | string | boolean)[][] = [
     [styles.root, true],
-    [styles[theme], true],
     [styles[onlyOn], !!onlyOn && !!styles[onlyOn]]
   ]
 
@@ -37,7 +35,9 @@ export const Cover: React.FC<CoverProps> = ({
   }
 
   if (gradients) {
-    theme = gradients.text_rgb === '0,0,0' ? 'dark' : 'light'
+    const theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light']
+
+    classNames = makeStyleContext(classNames, theme, styles)
 
     style.backgroundImage = generateGradient(gradients.bg_rgb)
   }

package/src/Cover/mock.json

@@ -0,0 +1,68 @@
+{
+  "type": "cover",
+  "data": {
+    "cover": {
+      "mobile_ratio": 0.63,
+      "urls": {
+        "w325": {
+          "1x": "http://meduza.io/impro/M9sHKAlDngggZZa09qjgi3LApX9Ghzkx_LdIPcyZfgI/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDkvNzM1L29yaWdp/bmFsL1YwTHpzVXlr/VURZb3ZFd19hOE52/R2cuanBn.jpg",
+          "2x": "http://meduza.io/impro/Nr2-XwYsEPagIc-weLkdduLFXr1NSmxEC_A761UGdog/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDkvNzM1L29yaWdp/bmFsL1YwTHpzVXlr/VURZb3ZFd19hOE52/R2cuanBn.jpg",
+          "1x_webp": "http://meduza.io/impro/hT-X6XSIM23ZrlXkE2f5MXpqkAHVPA5eYWzhpMhzZ2s/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDkvNzM1L29yaWdp/bmFsL1YwTHpzVXlr/VURZb3ZFd19hOE52/R2cuanBn.webp",
+          "2x_webp": "http://meduza.io/impro/Z9KQbsN1z8fZWcGIrW7I4w7LN1MyAHGQBu1oWWzpNNo/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDkvNzM1L29yaWdp/bmFsL1YwTHpzVXlr/VURZb3ZFd19hOE52/R2cuanBn.webp"
+        },
+        "w600": {
+          "1x": "http://meduza.io/impro/cCHLmlwjP25disRkC-Eor6v3RsNK3jLtBKN-j1_ZxaM/fill/600/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDkvNzM1L29yaWdp/bmFsL1YwTHpzVXlr/VURZb3ZFd19hOE52/R2cuanBn.jpg",
+          "2x": "http://meduza.io/impro/zljrWd5HEMa_RGfB2L_7abVCEHAJPNaZlFSbGODFb_8/fill/1200/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDkvNzM1L29yaWdp/bmFsL1YwTHpzVXlr/VURZb3ZFd19hOE52/R2cuanBn.jpg",
+          "1x_webp": "http://meduza.io/impro/do1qSAguDbKooQgjOexHYzHznJQKlo2XG0GF_Z5uqYs/fill/600/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDkvNzM1L29yaWdp/bmFsL1YwTHpzVXlr/VURZb3ZFd19hOE52/R2cuanBn.webp",
+          "2x_webp": "http://meduza.io/impro/yHMZFbO45Nnropc-DG25HkpXjVpcwYMEN7c-cEbQq5M/fill/1200/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDkvNzM1L29yaWdp/bmFsL1YwTHpzVXlr/VURZb3ZFd19hOE52/R2cuanBn.webp"
+        }
+      },
+      "credit": "Семен Кац для «Медузы»",
+      "cc": "button",
+      "gradients": {
+        "text_rgb": "255,255,255",
+        "bg_rgb": "0,0,0"
+      }
+    },
+    "blocks": [
+      {
+        "type": "tag",
+        "data": {
+          "text": "истории",
+          "theme": "light"
+        },
+        "id": "0-2e373c1465397312237f88e6e2215ce409542f4428c0b155ae1853d8bfe9e141"
+      },
+      {
+        "type": "rich_title",
+        "data": {
+          "first": "«Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
+          "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
+          "featured": true
+        },
+        "id": "1-7b53ea24bd8ae1cfa59f45e4e4027bdabb5bf9667b97f0a6ed45d6b464c47356"
+      },
+      {
+        "type": "meta",
+        "data": {
+          "lang": "ru",
+          "components": [
+            {
+              "type": "datetime",
+              "datetime": 1600593764,
+              "id": "7639a7d1455a1ca907de0fc98a22b017e23f30e7df15b0739c78418848d674b5"
+            },
+            {
+              "type": "source_name",
+              "text": "Meduza",
+              "id": "7666648e8adc7e5a46468a3e5c93ddd02725afb5023eaa479a234bef39d274bb"
+            }
+          ],
+          "theme": "light"
+        },
+        "id": "2-e09585bd2b15e886b22728975010295dae47dd7ace948bc8aa012080f713290d"
+      }
+    ]
+  },
+  "id": "0-7abcea1ffd7337d1609cf29e12736d050ec30883abc5d645b06f96ef60257a81"
+}

package/src/DocumentItemsCount/DocumentItemsCount.stories.module.css

@@ -2,4 +2,6 @@
 
 .root {
   display: block;
+
+  font-family: $secondaryFont;
 }

package/src/DocumentItemsCount/DocumentItemsCount.stories.tsx

@@ -16,7 +16,12 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <DocumentItemsCount />
+        <p>
+          <DocumentItemsCount type="card" items={4} />
+        </p>
+        <p>
+          <DocumentItemsCount type="podcast" items={4} />
+        </p>
       </div>
     </>
   )

package/src/DocumentItemsCount/DocumentItemsCount.types.ts

@@ -1,6 +1,6 @@
 export interface DocumentItemsCountProps {
-  type: string
-  lang?: string
+  type: 'podcast' | 'card'
+  lang?: 'ru' | 'en'
   items: number
-  children: JSX.Element[] | JSX.Element
+  children?: JSX.Element[] | JSX.Element
 }

package/src/GroupedBlock/GroupedBlock.stories.tsx

@@ -4,6 +4,8 @@ import { GroupedBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
 import styles from './GroupedBlock.stories.module.css'
 
+import mock from './mock.json';
+
 export default {
   title: 'Main / GroupedBlock',
   component: GroupedBlock,
@@ -16,7 +18,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <GroupedBlock />
+        <GroupedBlock block={mock} />
       </div>
     </>
   )

package/src/GroupedBlock/mock.json

@@ -0,0 +1,110 @@
+{
+  "type": "grouped",
+  "data": [
+    {
+      "type": "image",
+      "data": {
+        "lazy": true,
+        "fullscreen": false,
+        "small_url": "/image/attachments/images/006/011/025/small/hh3VnjmWh65MDuaTEn8Tyw.jpg",
+        "large_url": "/image/attachments/images/006/011/025/large/hh3VnjmWh65MDuaTEn8Tyw.jpg",
+        "elarge_url": "/image/attachments/images/006/011/025/elarge/hh3VnjmWh65MDuaTEn8Tyw.jpg",
+        "width": 1960,
+        "height": 1307,
+        "caption": "Пожарные наблюдают за горящим лесом в местности Джунипер-Хиллс к северо-востоку от Лос-Анджелеса. 17 сентября 2020 года",
+        "credit": "Etienne Laurent / EPA / Scanpix / LETA",
+        "cc": "default",
+        "display": "default",
+        "optimized": {
+          "original": "https://meduza.io/impro/e8bp3kGnHbdYVeTmypA88wvO2rO3eSZ1nqoQqwafNO0/fill/2670/0/ce/0/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+          "w325": {
+            "1x": "https://meduza.io/impro/2Ouk42hCVEcKh4N42RWKovSMu98b0KlkCxNLlF15B-M/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "2x": "https://meduza.io/impro/HibwLx6TONRGa9m1O-5E3NmBhW0r7OrpmfkF4mLER0E/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/RxQ0oo4Ln1f8u10439xNP3cBRq1HK1xlxA8aoZe7tDs/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/zefkvRO6CK-vufzq1zKnl9LZoDJ1JMDmobZchV2jgtk/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp"
+          },
+          "w520": {
+            "1x": "https://meduza.io/impro/sp_ZLgze1Kp3BWFv1IZFhC86f3P2U3h_gPCmnosdG4A/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "2x": "https://meduza.io/impro/D2XFMz2rdWwFhtq-M2ERJFbp109EKd2hUtM_ad2Cs9o/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/NrGRgOl0akYq4HbjpEh-vPdR-rtexygcKW3LUuREsns/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/65nutcUe9DJsKIwVlM0-M_RBgi52U3eA4rEc1Zx3dlI/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp"
+          },
+          "w650": {
+            "1x": "https://meduza.io/impro/HibwLx6TONRGa9m1O-5E3NmBhW0r7OrpmfkF4mLER0E/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "2x": "https://meduza.io/impro/wP5YBYAFlQxvfirDXGyH6GvrUCbglHdtJaddwruIqhY/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/zefkvRO6CK-vufzq1zKnl9LZoDJ1JMDmobZchV2jgtk/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/UIO48hD_G4M4U8pCnQ8D98jKOONiXSYWuyhNfNpjJoM/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp"
+          },
+          "w980": {
+            "1x": "https://meduza.io/impro/oQLQPtZYAPHoHTszV4ZRA0YSDFplKFT9S5dpSJ3JaCY/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "2x": "https://meduza.io/impro/KrcpdxUTdn3H7N_mJTMLIt8ELMLO-L_ogU6nbbJLYCw/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/NxGjHizFOneGpi2UPaoBuz4FHODKj5rLDjgkmPfaMoI/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/Cw72UphGi1jtv-YLBCG_RpILJoO9rdLSbzFx7KravnI/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp"
+          },
+          "w1335": {
+            "1x": "https://meduza.io/impro/L-9TA-smkGOriz9M576LtCMiCVjxH2o5_S5Ib5JYwqk/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "2x": "https://meduza.io/impro/23Jq3eNFhAzKcYKHewI0pcPjMvNNaUa9gn_KNY7neTc/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/TcI8KsGPv-uSxd3pJlIXuXkPmonN652D03mrMT8990M/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/eyTd-b0OVKs6H5FnoxMBVFqFJFkGENLoDMh8ANcK9IA/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDI1L29yaWdp/bmFsL2hoM1Zuam1X/aDY1TUR1YVRFbjhU/eXcuanBn.webp"
+          }
+        }
+      },
+      "subtype": "grouped",
+      "id": "13-0-b34177a203aa0897ee8aaf638bf9cf09d0a9db82c725292c4203731ee702c2db"
+    },
+    {
+      "type": "image",
+      "data": {
+        "lazy": true,
+        "fullscreen": false,
+        "small_url": "/image/attachments/images/006/011/020/small/3MCxTB9uARNCFtEXSdn4BA.jpg",
+        "large_url": "/image/attachments/images/006/011/020/large/3MCxTB9uARNCFtEXSdn4BA.jpg",
+        "elarge_url": "/image/attachments/images/006/011/020/elarge/3MCxTB9uARNCFtEXSdn4BA.jpg",
+        "width": 1960,
+        "height": 1307,
+        "caption": "Последствия лесных пожаров в долине Напа, Калифорния. 15 сентября 2020 года",
+        "credit": "Justin Sullivan / Getty Images / AFP",
+        "cc": "default",
+        "display": "default",
+        "optimized": {
+          "original": "https://meduza.io/impro/CanLPFEFtHBDPoH0QICxej2BICo1o20-UTNWc0VJrmI/fill/2670/0/ce/0/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+          "w325": {
+            "1x": "https://meduza.io/impro/2UCxX5MMjIYJcTrxtTDV1Ignf8bLqk-er1PLwICaf-k/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "2x": "https://meduza.io/impro/nuUBxnUOSfBGP7m6q8DuS2u2j3FJGOfBQ5kZqLE6QpU/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/3TrmLBsd7wp-rHtXt-89DBuVYB7JMWaOdz1KTBEdqZQ/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/T214Ezgxm-hcl9Z273UepPwo7vc1GAzNeaZqrRsTqYI/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp"
+          },
+          "w520": {
+            "1x": "https://meduza.io/impro/_Eg_U71Irp48DpHp_T35jlwtN7CiG2Pg8RyufRwecb0/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "2x": "https://meduza.io/impro/fCa_4qmst5Is2XBPymRGdQ-0Yqvetih5BY1rOpiKrbA/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/kBEbwsPIqv6zZb1-tmzJbGtqg2HVHArBTdJ7XKBRxCg/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/KxnRpt_J9NqcZBtyIFBVT1x6hpyiG4GuEM-GnWq0PVE/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp"
+          },
+          "w650": {
+            "1x": "https://meduza.io/impro/nuUBxnUOSfBGP7m6q8DuS2u2j3FJGOfBQ5kZqLE6QpU/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "2x": "https://meduza.io/impro/zKl4bhQuzB2Khv1J9WMkbTDPGNvkNPksRkiJpD2saE0/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/T214Ezgxm-hcl9Z273UepPwo7vc1GAzNeaZqrRsTqYI/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/q2y7RbDsQos2k2uaqERkgYdgKW-dARp9Z90iuQdm_-E/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp"
+          },
+          "w980": {
+            "1x": "https://meduza.io/impro/2TU248Q5xUN-Z_wWcUlJPBsIQtTZaFp7nGfD9NwYFr4/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "2x": "https://meduza.io/impro/4aHvHAaOmMl97RF44tz359fOnGk7xPffvKjsIybiY-0/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/4YCukpYtAPGwrQ7FgLiZRYbODs3TqgpgbThM4KHp73A/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/I1HGtoCKlBZ-47FgHp6B8vmF9ktzTuBYjizraPeiZPM/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp"
+          },
+          "w1335": {
+            "1x": "https://meduza.io/impro/o1TGJbCFKQ0I1uytPb1M8BO5PgnCKAwEDuAxIirqrso/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "2x": "https://meduza.io/impro/KnYbAZPBQX65FtCrJqlkxc8By3ImSo4n2xkGrhsGRP4/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.jpg",
+            "1x_webp": "https://meduza.io/impro/Hltcr4nObZqGiX9B8tftoxiDcj512lA_Czce_-v67Eo/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp",
+            "2x_webp": "https://meduza.io/impro/jIjhi9bak_DcbOEFQp7fTpKXPqwkvwqZ6JCpby7jHcU/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MTEvMDIwL29yaWdp/bmFsLzNNQ3hUQjl1/QVJOQ0Z0RVhTZG40/QkEuanBn.webp"
+          }
+        }
+      },
+      "subtype": "grouped",
+      "id": "13-1-6700424e506f740e6749ef5707278c4f022a3f49cb9889e1959aa624e2cb5c58"
+    }
+  ],
+  "cc": "none",
+  "display": "full",
+  "id": "13-638226dea8812ab943cf89a0ad2e8b8d77a2ed11f0a0d37d7a277d49e4879e94"
+}

package/src/HalfBlock/HalfBlock.stories.module.css

@@ -1,5 +1,6 @@
 @import '../vars.css';
 
 .root {
-  display: block;
+  max-width: 1005px;
+  margin: 0 auto;
 }

package/src/HalfBlock/HalfBlock.stories.tsx

@@ -4,6 +4,8 @@ import { HalfBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
 import styles from './HalfBlock.stories.module.css'
 
+import mock from './mock.json'
+
 export default {
   title: 'Main / HalfBlock',
   component: HalfBlock,
@@ -16,7 +18,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <HalfBlock />
+        <HalfBlock block={mock} />
       </div>
     </>
   )

package/src/HalfBlock/mock.json

@@ -0,0 +1,81 @@
+{
+  "type": "half",
+  "data": {
+    "cover": {
+      "ratio": 0.77,
+      "credit": "Dino Fracchia / Alamy / Vida Press",
+      "cc": "default",
+      "optimized": {
+        "original": "https://meduza.io/impro/LwMPH-yVD6V8wqTuy7-P_0_rKQbO3Nx7P4NBoqSXp7g/fill/2670/0/ce/0/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+        "w325": {
+          "1x": "https://meduza.io/impro/_q8UrhTJeFJwPwhcttgEE_lDmWpbubxu7VjiBTY_Rao/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "2x": "https://meduza.io/impro/Zc1Gbfv3axfeeZzAV07_YF8fygNCMgIbUcwLFSwf8uU/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/JllsU82tRkTWvt3KxHsXfdWTpEkcxhrLpLTK7k8-ko4/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/X0UsKgQHcBr3s8rvF16WA8UUuNiAevPC_tlXCuNzuGc/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp"
+        },
+        "w520": {
+          "1x": "https://meduza.io/impro/HVJageEPZ7Kk17e26zVh49ECRHrROLDGTTeeD_kAaQU/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "2x": "https://meduza.io/impro/b3dW5wx6V5FC3e5BhouBI95IgqGuK6PgbaUuJcVAjL4/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/F39QD6YtmeV7iMhlwaoHpojjK-ffoZXMPeL6xDnhayY/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/s6fIUnFhE1EvEwwKBAysGJ6xzH0VFYwFqVgEvKggFSk/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp"
+        },
+        "w650": {
+          "1x": "https://meduza.io/impro/Zc1Gbfv3axfeeZzAV07_YF8fygNCMgIbUcwLFSwf8uU/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "2x": "https://meduza.io/impro/1ZNEkDKpyrX_iNRAbKWq0QkA-UimmPBiDMmR1JelWZI/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/X0UsKgQHcBr3s8rvF16WA8UUuNiAevPC_tlXCuNzuGc/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/YayYCh_nNWGR91y4li5Jw7yBBi4nVspp3gEV70Uzvcw/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp"
+        },
+        "w980": {
+          "1x": "https://meduza.io/impro/3SdgDseqCU9WffDShY6YBazDYz6WDpAdBJ954fBS2Ak/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "2x": "https://meduza.io/impro/Tu1cCsTj6b-SrmSmqKF6WP7fg9ILd5tvE7fxLSPmwAQ/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/4ZvT3ZDPBjnvrZ1lTKr9e-lLmeM2mq5yxq3v9xbdhUM/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/3WVmC6rlDowdR4P_Knocxi0r9pMODdPZcOKcDCHe9x0/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp"
+        },
+        "w1335": {
+          "1x": "https://meduza.io/impro/pxHyeWLMRENRPWW239_7CoQpUwi8QhZP3WLJjO6Cklk/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "2x": "https://meduza.io/impro/s3-uZxrJjnaffxqPi_0ozVjUZeTouNF5vCADz5lQcds/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.jpg",
+          "1x_webp": "https://meduza.io/impro/Ng4aoJAzv6WxW12wOK12sWu1ZjBqfbZTaFeVXPaR-MQ/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp",
+          "2x_webp": "https://meduza.io/impro/UBFu8YNeQX1ZhpF2b_Nc2g-a3N-Z2U7vc0IH3RLBbSY/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MDIvNjMzL29yaWdp/bmFsL3pKZUJIZjFD/WXlqLUJ3Vm1uUF92/T3cuanBn.webp"
+        }
+      }
+    },
+    "blocks": [
+      {
+        "type": "tag",
+        "data": {
+          "text": "истории",
+          "theme": "gold"
+        },
+        "id": "0-2fea21488cfb33611636c85d60b655f3ddbb81e0cc6576d87d4867198b273c17"
+      },
+      {
+        "type": "rich_title",
+        "data": {
+          "first": "Издатель красоты",
+          "second": "Умер Франко Мария Риччи. Он создал, возможно, самый известный лабиринт современности — но это была всего лишь его последняя причуда"
+        },
+        "id": "1-4e2a30ba40c5356befe4c0457b904edf062996aa1fac5536128111f6703a2649"
+      },
+      {
+        "type": "meta",
+        "data": {
+          "lang": "ru",
+          "components": [
+            {
+              "type": "datetime",
+              "datetime": 1600273875,
+              "id": "87228a76f85fb8b951342aff0878fd39407b3ba503047118e8885db622b48488"
+            },
+            {
+              "type": "source_name",
+              "text": "Meduza",
+              "id": "7666648e8adc7e5a46468a3e5c93ddd02725afb5023eaa479a234bef39d274bb"
+            }
+          ]
+        },
+        "id": "2-6ba723288c686d4fffed6a2cf83a31612ef0fde55a1c14e309406c5fde66ace2"
+      }
+    ]
+  },
+  "id": "0-7b90cfe508a393a0bd8ba90d7625cf0e9caca40fca388d460822e73248f45d0f"
+}

package/src/Image/Image.types.ts

@@ -9,12 +9,12 @@ export interface ImageProps {
   alt?: string
   display?: string
   optimized?: {
-    original: string
+    original?: string
     w325: OptimizedImageItem
-    w520: OptimizedImageItem
-    w650: OptimizedImageItem
-    w980: OptimizedImageItem
-    w1335: OptimizedImageItem
+    w520?: OptimizedImageItem
+    w650?: OptimizedImageItem
+    w980?: OptimizedImageItem
+    w1335?: OptimizedImageItem
   }
   width?: number
   height?: number

package/src/ImportantLead/ImportantLead.stories.tsx

@@ -4,6 +4,8 @@ import { ImportantLead } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
 import styles from './ImportantLead.stories.module.css'
 
+import mock from './mock.json'
+
 export default {
   title: 'Main / ImportantLead',
   component: ImportantLead,
@@ -16,7 +18,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <ImportantLead />
+        <ImportantLead block={mock} />
       </div>
     </>
   )

package/src/ImportantLead/ImportantLead.types.ts

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