@meduza/ui-kit-2 0.1.37 → 0.1.38

package/src/RelatedRichBlock/RelatedRichBlock.module.css

@@ -13,17 +13,23 @@
   outline-width: 0;
 }
 
+.root:hover {
+  @media $mobile {
+    opacity: 0.95;
+  }
+}
+
 .root::after {
   position: absolute;
-  z-index: 20;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-
-  content: '';
+  z-index: 20;
 
   border-radius: 8px;
+
+  content: '';
 }
 
 .root::before {
@@ -49,9 +55,9 @@
 .overlay,
 .overlayHeader {
   position: absolute;
-  z-index: 10;
   right: 0;
   left: 0;
+  z-index: 10;
 }
 
 .overlay {
@@ -71,16 +77,16 @@
   flex-flow: column nowrap;
   justify-content: flex-end;
 
-  padding: 12px 15px 12px;
+  padding: 12px 15px;
 
   background-color: #f7f7f7;
 
   @media $mobile {
     position: absolute;
-    z-index: 10;
     right: 0;
     bottom: 0;
     left: 0;
+    z-index: 10;
 
     min-height: 295px;
     padding: 20px;
@@ -100,10 +106,10 @@
 .isRich.hasGradient .body {
   @media $mobile {
     position: absolute;
-    z-index: 10;
     right: 0;
     bottom: 0;
     left: 0;
+    z-index: 10;
 
     min-height: 295px;
 
@@ -117,15 +123,15 @@
 
 .isRich .picture::after {
   position: absolute;
-  z-index: 10;
   right: 1px;
   bottom: 0;
   left: 1px;
-
-  content: '';
+  z-index: 10;
 
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
+  content: '';
+
   @media $mobile {
     content: '';
   }
@@ -133,6 +139,7 @@
 
 .isCard {
   color: #fff;
+
   background-color: #191919;
 
   @media $mobile {
@@ -145,10 +152,10 @@
 
   @media $mobile {
     position: absolute;
-    z-index: 10;
     right: 0;
     bottom: 0;
     left: 0;
+    z-index: 10;
 
     min-height: 295px;
   }
@@ -205,10 +212,10 @@
 
 .tag {
   position: absolute;
-  z-index: 10;
   top: 14px;
   right: 15px;
   left: 15px;
+  z-index: 10;
 
   color: rgba(255, 255, 255, 0.7);
 

package/src/RenderBlocks/index.tsx

@@ -11,11 +11,11 @@ import { CardTitle } from '../CardTitle'
 import { RelatedBlock } from '../RelatedBlock'
 import { SourceBlock } from '../SourceBlock'
 import { EmbedBlockContainer } from '../EmbedBlock'
-import { RelatedRichBlock } from '../RelatedRichBlock'
 import { GroupedBlock } from '../GroupedBlock'
 import { MetaContainer } from '../Meta/MetaContainer'
 import { Table } from '../Table'
 import { MaterialNote } from '../MaterialNote'
+import { SensitiveBlock } from '../SensitiveBlock'
 
 export const RenderBlocks: React.FC<RenderBlocksProps> = ({
   block,
@@ -82,10 +82,6 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
       return <ListBlock block={block} styleContext={styleContext} />
     }
 
-    case 'related_rich': {
-      return <RelatedRichBlock block={block} styleContext={styleContext} />
-    }
-
     case 'chapter-subtitle': {
       return <ChapterBlock block={block} styleContext={styleContext} />
     }
@@ -104,6 +100,9 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
     case 'table':
       return <Table block={block} styleContext={styleContext} />
 
+    case 'sensitive':
+      return <SensitiveBlock block={block} styleContext={styleContext} />
+
     case 'embed':
     case 'embed_code':
     case 'game_embed':

package/src/RenderBlocks/mock.json

@@ -5,79 +5,6 @@
       "data": "Hello Component",
       "length": 9,
       "id": "11-1ff7b114f405e532387ad41ebfc3c794c3baaa413180d495c00a60273f0d2eb400d"
-    },
-    {
-      "type": "related_rich",
-      "data": {
-        "url": "https://meduza.io/",
-        "fallback": {
-          "data": {
-            "title": "Не богато вышло",
-            "related": [
-              {
-                "title": "«Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
-                "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
-                "layout": "rich",
-                "url": "feature/2018/09/18/na-rossiyskuyu-bolnitsu-pervye-podali-v-sud-za-otkaz-v-poseschenii-umirayuschego-v-reanimatsii-rodstvennika-sud-vstal-na-storonu-medikov",
-                "id": "0-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
-              }
-            ]
-          },
-          "only_on": "desktop"
-        },
-        "cover": {
-          "ratio": 1.4976958525,
-          "layout": "rich",
-          "urls": {
-            "w325": {
-              "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
-              "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
-              "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
-              "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
-            },
-            "w600": {
-              "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
-              "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
-              "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
-              "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
-            }
-          },
-          "tag": "Читайте также",
-          "gradients": {
-            "text_rgb": "255,255,255",
-            "bg_rgb": "0,0,0"
-          }
-        },
-        "blocks": [
-          {
-            "type": "rich_title",
-            "data": {
-              "first": "«Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
-              "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
-              "as": "h3",
-              "featured": false
-            },
-            "id": "1-7b53ea24bd8ae1cfa59f45e4e4027bdabb5bf9667b97f0a6ed45d6b464c47356"
-          },
-          {
-            "type": "meta",
-            "data": {
-              "lang": "ru",
-              "components": [
-                {
-                  "type": "datetime",
-                  "datetime": 1600593764,
-                  "id": "7639a7d1455a1ca907de0fc98a22b017e23f30e7df15b0739c78418848d674b5"
-                }
-              ],
-              "theme": "light"
-            },
-            "id": "2-e09585bd2b15e886b22728975010295dae47dd7ace948bc8aa012080f713290d"
-          }
-        ]
-      },
-      "only_on": "desktop",
-      "id": "11-1ff7b114f405e532387ad41ebfc3c7941313c3baaa413180d495c00a60273f0d2eb400d"
     }
   ]
 }

package/src/SensitiveBlock/SensitiveBlock.module.css

@@ -0,0 +1,143 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  margin: 15px 0;
+
+  @media $mobile {
+    margin: 25px 0 20px;
+  }
+}
+
+.root:first-child {
+  margin-top: 0;
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root figcaption {
+  width: 100%;
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+
+  font-family: $secondaryFont;
+}
+
+.container {
+  position: relative;
+  transition: min-height 350ms ease;
+  min-height: 170px;
+}
+
+.overlay {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  right: -20px;
+  bottom: 0;
+  left: -20px;
+
+  display: flex;
+  align-items: center;
+  flex-flow: column nowrap;
+  justify-content: center;
+
+  padding: 30px 20px;
+
+  transition: opacity 500ms ease, visibility 500ms ease;
+
+  background-color: rgba(255, 255, 255, 1);
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: cover;
+
+  @media $mobile {
+    right: 0;
+    left: 0;
+  }
+}
+
+.content {
+  user-select: none;
+
+  color: #fff;
+
+  font-family: $secondaryFont;
+}
+
+.content p {
+  display: block;
+
+  width: 100%;
+  max-width: 368px;
+  margin-top: 0;
+  margin-bottom: 24px;
+
+  text-align: center;
+
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.button {
+  width: 100%;
+  max-width: 348px;
+  margin: 0 auto;
+}
+
+.default {
+  max-width: 650px;
+
+  @media $mobile {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.full {
+  max-width: 980px;
+
+  @media $mobile {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.full .container {
+  margin-right: -20px;
+  margin-left: -20px;
+
+  @media $mobile {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+.super_full {
+  max-width: 100%;
+}
+
+.super_full .container {
+  @media $mobile {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+
+/* STATE */
+.visible .overlay {
+  visibility: hidden;
+
+  pointer-events: none;
+
+  opacity: 0;
+}
+
+.visible .container {
+  min-height: 0;
+}

package/src/SensitiveBlock/SensitiveBlock.stories.module.css

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

package/src/SensitiveBlock/SensitiveBlock.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { SensitiveBlock } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './SensitiveBlock.stories.module.css'
+
+import mock from './mock.json'
+
+export default {
+  title: 'Main / SensitiveBlock',
+  component: SensitiveBlock,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const { blocks } = mock
+
+  return (
+    <>
+      <div className={styles.root}>
+        {blocks.map((item) => (
+          <SensitiveBlock block={item} key={item.id} styleContext={[]} />
+        ))}
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    {/* <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper> */}
+  </>
+)

package/src/SensitiveBlock/SensitiveBlock.test.tsx

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

package/src/SensitiveBlock/SensitiveBlock.types.ts

@@ -0,0 +1,15 @@
+export interface SensitiveBlockProps {
+  block: {
+    id: string
+    title: string
+    blurred_image: string
+    button: {
+      text: string
+    }
+    item: any
+    credit?: string
+    caption?: string
+    cc: string
+  }
+  styleContext?: string[] | string
+}

package/src/SensitiveBlock/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { SensitiveBlockProps } from './SensitiveBlock.types'
+import makeClassName from '../utils/makeClassName'
+
+import { EmbedBlockContainer } from '../EmbedBlock'
+import { MediaCaption } from '../MediaCaption'
+import { Button } from '../Button'
+
+import styles from './SensitiveBlock.module.css'
+
+export const SensitiveBlock: React.FC<SensitiveBlockProps> = ({
+  block,
+  block: { cc, caption, credit, blurred_image: blurredImage },
+  block: {
+    item: {
+      data: { display }
+    }
+  },
+  styleContext
+}) => {
+  const [visible, isVisible] = useState(false)
+
+  const handleClick = () => {
+    isVisible(true)
+  }
+
+  return (
+    <div
+      data-testid="sensitive-block"
+      className={makeClassName([
+        [styles.root, true],
+        [styles.visible, visible],
+        [styles[display], display && styles[display]]
+      ])}
+    >
+      <div className={styles.container}>
+        <div
+          className={styles.overlay}
+          style={{ backgroundImage: `url(${blurredImage})` }}
+        >
+          <div className={styles.content}>
+            <p dangerouslySetInnerHTML={{ __html: block.title }} />
+
+            <div className={styles.button}>
+              <Button onClick={() => handleClick()} theme="light">
+                {block.button.text}
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className={styles.media}>
+          <EmbedBlockContainer
+            block={block.item}
+            styleContext={['isInSensitiveBlock']}
+          />
+        </div>
+      </div>
+
+      {cc && (
+        <figcaption className={styles.figcaption}>
+          <MediaCaption
+            credit={credit}
+            caption={caption}
+            styleContext={styleContext}
+          />
+        </figcaption>
+      )}
+    </div>
+  )
+}

package/src/SensitiveBlock/mock.json

@@ -0,0 +1,61 @@
+{
+  "blocks": [
+    {
+      "type": "sensitive",
+      "title": "18 ноября несколько тысяч человек устроили возле Бранденбургских ворот в Берлине акцию против антикоронавирусных мер",
+      "caption": "18 ноября несколько тысяч человек устроили возле Бранденбургских ворот в Берлине акцию против антикоронавирусных мер, введенных правительством Германии. <a href=\"https://www.zeit.de/politik/deutschland/2020-11/bevoelkerungsschutzgesetz-berlin-corona-proteste-abstimmung-corona-politik-regierungsviertel-infektionsschutzgesetz\" target=\"_blank\">Как сообщает Die Zeit</a>, протестующие не соблюдали дистанцию и не носили защитных масок. В полиции <a href=\"https://twitter.com/PolizeiBerlin_E/status/1329033384409116679\" target=\"_blank\">заявили</a>, что участники протестов бросали в полицейских бутылки, камни и петарды, а также использовали перцовый спрей. Полиция применила против демонстрантов водометы, что «очень необычно для Берлина», <a href=\"https://www.bild.de/regional/berlin/berlin-aktuell/gegner-der-corona-massnahmen-demonstrieren-wieder-in-berlin-74003922.bild.html\" target=\"_blank\">пишет Bild</a>. В полиции <a href=\"https://twitter.com/PolizeiBerlin_E/status/1329063341776642053\" target=\"_blank\">сообщили</a> о 190 задержанных.",
+      "credit": "Odd Andersen / AFP / Scanpix / LETA",
+      "cc": "default",
+      "button": {
+        "text": "Трогни чтобы увидеть"
+      },
+      "blurred_image": "https://meduza.io/image/attachments/images/006/179/198/original/7E08Oyt5qSKpRywhXLwrLg.webp",
+      "item": {
+        "type": "image",
+        "data": {
+          "small_url": "https://meduza.io/image/attachments/images/006/177/130/small/5Ei7odv4IYiUaPJIicJDLQ.jpg",
+          "large_url": "https://meduza.io/image/attachments/images/006/177/130/large/5Ei7odv4IYiUaPJIicJDLQ.jpg",
+          "elarge_url": "https://meduza.io/image/attachments/images/006/177/130/elarge/5Ei7odv4IYiUaPJIicJDLQ.jpg",
+          "height": 1328,
+          "width": 1960,
+          "display": "full",
+          "optimized": {
+            "original": "https://meduza.io/impro/anHT0Vh2OPD2xtF9H8CcIZcYPwMfg1Xs3luucAMANCs/fill/2670/0/ce/0/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+            "w325": {
+              "1x": "https://meduza.io/impro/Pppv1xRwyEPWgTYcWdDtLTyMfKk1yiSWYWbSocZaPX4/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "2x": "https://meduza.io/impro/K2boyZjzctKBpp6eEndOswVplmSviEntVMF7sS-HfGM/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "1x_webp": "https://meduza.io/impro/ju9g9g9NRCZRhAiGXQ28_tUQciVtLPtfGEq4QwzXF6o/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp",
+              "2x_webp": "https://meduza.io/impro/mAkn7bkT3SAKd-eYYPXBuzXl-947G0Z-2OiSYWLYOG8/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp"
+            },
+            "w520": {
+              "1x": "https://meduza.io/impro/wq7cnaFcyfi4BwlJCPntDAqBPevcWzJplOq66sWFhNE/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "2x": "https://meduza.io/impro/KQypYyxEx7jf8rdM8AY-6C1UKsY7F8VsaWfqbwbR95k/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "1x_webp": "https://meduza.io/impro/X4geRHzOaIiljNaZlD1_0kP8G_OoWcdKFVKlCrKdHds/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp",
+              "2x_webp": "https://meduza.io/impro/p0-QkEHBdVvxXX052mvP7XXSDav12VvsQ-drzO47VlI/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp"
+            },
+            "w650": {
+              "1x": "https://meduza.io/impro/K2boyZjzctKBpp6eEndOswVplmSviEntVMF7sS-HfGM/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "2x": "https://meduza.io/impro/IsiZ5kDEhsWzIds0csL_oz5ml2HHOQU_JIksf1CKlkk/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "1x_webp": "https://meduza.io/impro/mAkn7bkT3SAKd-eYYPXBuzXl-947G0Z-2OiSYWLYOG8/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp",
+              "2x_webp": "https://meduza.io/impro/tglX8IWWkUPexJezwDfoQg6xDrenUpWaMAgAwHckg7M/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp"
+            },
+            "w980": {
+              "1x": "https://meduza.io/impro/XLntahPDRv2sWhqa6zmvKeXIBC_rJe-Gm-QzZidE_v4/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "2x": "https://meduza.io/impro/B3JjZn3hHC6k_evpEmUept2DLnPb3NjuiVKORxlQe8E/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "1x_webp": "https://meduza.io/impro/XneTbp8xG5tiRfLqkrQR93VBh2bjvsnXsW9TSKVIHu0/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp",
+              "2x_webp": "https://meduza.io/impro/phgrh-EpPeXDBZ1ypW0Z_ZttXFISniLFICLoePQHCas/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp"
+            },
+            "w1335": {
+              "1x": "https://meduza.io/impro/GLUfXXJOrHhkW6IcxUfkZ9-ezIJJ7Pcj2ozTVuc-O9c/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "2x": "https://meduza.io/impro/EEPDi9TRZbxf6P4bDKMKMy_X-rNnZv28Aze1GuTWgS4/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.jpg",
+              "1x_webp": "https://meduza.io/impro/kr_f7-7yvpCWTM5VGPq1ydB_wwo6s4AChrbae9S6yDc/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp",
+              "2x_webp": "https://meduza.io/impro/wJ26MavDdFbHCQ3kzRuEpmfKwZS05Z-8FtM8HkBc3nQ/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8x/NzcvMTMwL29yaWdp/bmFsLzVFaTdvZHY0/SVlpVWFQSklpY0pE/TFEuanBn.webp"
+            }
+          }
+        },
+        "id": "0-55ff26409b089e78cd332f7125eb6efd2bc2522fb3f0742332ff6b3480916ab0"
+      },
+      "id": "0-55ff26409b089e78cd332f7125eb6efdere2bc2522fb3f0742332ff6b3480916ab0"
+    }
+  ]
+}

package/src/Spoiler/index.tsx

@@ -45,9 +45,10 @@ export const Spoiler: React.FC<SpoilerProps> = ({
     [[styles.spoiled], !!spoiled]
   ]
 
-  const context = ['center'].concat(styleContext)
+  const context = ['center']
 
   if (styleContext) {
+    context.concat(styleContext)
     classNames = makeStyleContext(classNames, styleContext, styles)
   }
 

package/src/SvgSymbol/SvgSymbol.module.css

@@ -63,7 +63,7 @@
 .reaction {
   width: 16px;
 
-  color: $gold;
+  color: #dcad76;
 
   fill: #262626;
 }

package/src/index.tsx

@@ -38,4 +38,5 @@ export * from './DocumentItemsCount'
 export * from './ToolbarButton'
 export * from './Footnote'
 export * from './RelatedRichBlock'
+export * from './SensitiveBlock'
 // /* PLOP_INJECT_LINK */ //

package/src/vars.css

@@ -27,15 +27,15 @@ $gapMedium: 15px;
 $gapSmall: 12px;
 
 /* Media */
-$mobile: only screen and (min-device-width: 32em);              /*  512 */
-$contentWidth: only screen and (min-device-width: 40.625em);          /*  650 */
-$portraitTablet: only screen and (min-device-width: 48em);              /*  768 */
-$landscapeTablet: only screen and (min-device-width: 64em);              /* 1024 */
-$desktop: only screen and (min-device-width: 63.125em);          /* 1010 */
-$wideDesktop: only screen and (min-device-width: 75em);              /* 1200 */
+$mobile: only screen and (min-width: 32em);              /*  512 */
+$contentWidth: only screen and (min-width: 40.625em);          /*  650 */
+$portraitTablet: only screen and (min-width: 48em);              /*  768 */
+$landscapeTablet: only screen and (min-width: 64em);              /* 1024 */
+$desktop: only screen and (min-width: 63.125em);          /* 1010 */
+$wideDesktop: only screen and (min-width: 75em);              /* 1200 */
 
-$mobileMax: only screen and (max-device-width: 32.1875em);         /*  511 */
-$landscapeTabletMax: only screen and (max-device-width: 63.9375em);         /* 1023 */
+$mobileMax: only screen and (max-width: 32.1875em);         /*  511 */
+$landscapeTabletMax: only screen and (max-width: 63.9375em);         /* 1023 */
 
 /* Zindex */
 $zIndex-1: 100;