@meduza/ui-kit-2 0.2.3 → 0.2.5

package/package.json

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

package/src/AnnouncementInText/AnnouncementInText.module.css

@@ -0,0 +1,188 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+  z-index: 10;
+
+  display: block;
+  overflow: hidden;
+
+  margin: calc(15rem / 16) 0;
+  padding: 55px 12px 12px;
+
+  text-decoration: none;
+
+  color: #000;
+  border-radius: 8px;
+  outline-width: 0;
+  background-color: #f7f7f7;
+
+  font-family: $secondaryFont;
+
+  @media $mobile {
+    min-height: 302px;
+    margin: 25px 0 20px;
+    padding: 20px 35px 20px 20px;
+  }
+}
+
+.root::before,
+.root::after {
+  position: absolute;
+
+  content: '';
+
+  background-repeat: no-repeat;
+}
+
+.root::before {
+  z-index: 1;
+  top: 0;
+  right: 0;
+
+  width: 133px;
+  height: 94px;
+
+  background-image: url('https://meduza.io/image/attachments/images/007/350/982/original/Rf-ceQIzOIuzPr1dkhgsyg.png');
+  background-size: 133px 94px;
+
+  @media $mobile {
+    width: 178px;
+    height: 66px;
+
+    background-image: url('https://meduza.io/image/attachments/images/007/350/467/original/WaQIwXV75NXWXqWQFp_MGQ.png');
+    background-size: 178px 66px;
+  }
+}
+
+.root::after {
+  z-index: -1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  background-image: url('https://meduza.io/image/attachments/images/007/351/482/original/Qm9dzko-_FjCOXoJJCjV2g.png');
+  background-position: center bottom;
+  background-size: 650px 170px;
+
+  @media $mobile {
+    background-image: url('https://meduza.io/image/attachments/images/007/350/475/original/qs_KJfUrIyxzMx0mvk8-jg.png');
+    background-size: 100% auto;
+  }
+}
+
+.body {
+  position: relative;
+  z-index: 10;
+
+  max-width: 545px;
+  margin-bottom: 33px;
+
+  @media $mobile {
+    margin-bottom: 60px;
+  }
+}
+
+.body p {
+  margin: 0;
+
+  font-size: 16px;
+  line-height: 22px;
+
+  @media $mobile {
+    font-size: 18px;
+  }
+}
+
+.title {
+  max-width: 315px;
+  margin: 0 0 10px;
+
+  font-size: 27px;
+  font-weight: 700;
+  line-height: 30px;
+
+  @media $mobile {
+    max-width: initial;
+    margin: 0 0 10px;
+
+    font-size: 32px;
+    line-height: 38px;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
+
+.button {
+  display: block;
+
+  width: 100%;
+  max-width: 315px;
+  padding: 13px 0;
+
+  text-align: center;
+  text-decoration: none;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+
+  color: #fff;
+  border-radius: 25px;
+  background-color: #000;
+
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+
+  @media $mobile {
+    max-width: 315px;
+  }
+}
+
+.button:hover {
+  background-color: #8064e2;
+}
+
+.button::after {
+  position: absolute;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  content: '';
+}
+
+/* Mods */
+
+.center {
+  @media $mobile {
+    width: 100%;
+    max-width: 650px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.isInCard,
+.isInSlide {
+  margin-right: -11px;
+  margin-left: -11px;
+
+  @media $mobile {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+.en.root::before {
+  @media $mobileMax {
+    top: -8px;
+    right: -23px;
+  }
+}

package/src/AnnouncementInText/AnnouncementInText.stories.module.css

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

package/src/AnnouncementInText/AnnouncementInText.stories.tsx

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

package/src/AnnouncementInText/AnnouncementInText.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { AnnouncementInText } from './'
+import { AnnouncementInTextProps } from './AnnouncementInText.types'
+
+import styles from './AnnouncementInText.module.css'
+
+describe('Announcement In Text', () => {
+  let props: AnnouncementInTextProps
+
+  const renderComponent = () => render(<AnnouncementInText {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const announcementInText = getByTestId('announcement-in-text')
+
+    expect(announcementInText).toHaveClass(styles.root)
+  })
+})

package/src/AnnouncementInText/AnnouncementInText.types.ts

@@ -0,0 +1,4 @@
+export interface AnnouncementInTextProps {
+  styleContext: string[] | string
+  lang: 'ru' | 'en'
+}

package/src/AnnouncementInText/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { AnnouncementInTextProps } from './AnnouncementInText.types'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import styles from './AnnouncementInText.module.css'
+
+export const AnnouncementInText: React.FC<AnnouncementInTextProps> = ({
+  styleContext,
+  lang = 'ru'
+}) => {
+  let classNames: ClassNames = [
+    [styles.root, true],
+    [styles[lang], styles[lang]]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  const data = {
+    ru: {
+      title: 'Подарите себе «Медузу»',
+      text:
+        'В&nbsp;2021 году &laquo;Медуза&raquo; смогла выжить&nbsp;&mdash; благодаря читателям. Но&nbsp;нам по-прежнему нужна поддержка. Один раз или регулярно, маленькая сумма или большая&nbsp;&mdash; любая помощь критически важна. В&nbsp;2022-м наша редакция может рассчитывать только на&nbsp;вас. А&nbsp;вы&nbsp;знаете, что делать.',
+      button: 'О да, я знаю!',
+      href: 'https://support.meduza.io'
+    },
+
+    en: {
+      title: 'This holiday season, make Meduza your gift to&nbsp;yourself',
+      text:
+        'Meduza survived 2021 thanks to readers like&nbsp;you. To make it through another year, we need your continued support. One-time contributions and especially recurring donations will sustain Meduza’s work in 2022. Whatever you can give, your help is critical. The future of our newsroom is in your hands. You know what to do.',
+      button: 'Let’s do this!',
+      href: 'https://support.meduza.io/en'
+    }
+  }
+
+  const localeData = data[lang]
+
+  return (
+    <div
+      data-testid="announcement-in-text"
+      className={makeClassName(classNames)}
+    >
+      <div className={styles.body}>
+        <h3
+          className={styles.title}
+          dangerouslySetInnerHTML={{ __html: localeData.title }}
+        />
+        <p dangerouslySetInnerHTML={{ __html: localeData.text }} />
+      </div>
+
+      <div className={styles.footer}>
+        <a className={styles.button} href={localeData.href}>
+          {localeData.button}
+        </a>
+      </div>
+    </div>
+  )
+}

package/src/DonatesTeaser/DonatesTeaser.module.css

@@ -7,7 +7,7 @@
   display: block;
 
   margin: calc(15rem / 16) -20px;
-  padding: 42px 20px 50px;
+  padding: 67px 20px 70px;
   overflow: hidden;
 
   font-family: $secondaryFont;
@@ -20,7 +20,7 @@
 
   @media $mobile {
     margin: 25px 0 20px;
-    padding: 48px 30px;
+    padding: 59px 30px 73px;
 
     border-radius: 8px;
   }
@@ -47,6 +47,27 @@
   }
 }
 
+.title::after {
+  display: inline-block;
+
+  width: 21px;
+  height: 21px;
+
+  vertical-align: text-top;
+
+  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12.735c1.089 3.09 5.133 9.759 7.467 10.247C12.397 23.593 21.133 8.832 23 2' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-size: 21px;
+
+  content: '';
+
+  @media $mobile {
+    width: 25px;
+    height: 25px;
+
+    background-size: 25px;
+  }
+}
+
 .text {
   display: block;
 
@@ -70,13 +91,19 @@
   align-items: center;
   justify-content: center;
 
-  margin-top: 45px;
+  margin-top: 35px;
+
+  transition: opacity 350ms ease;
 
   @media $mobile {
-    margin-top: 40px;
+    margin-top: 33px;
   }
 }
 
+.cta:hover {
+  opacity: 0.75;
+}
+
 .cta a {
   display: block;
 
@@ -91,8 +118,11 @@
   text-transform: uppercase;
   text-decoration: none;
 
-  background-color: #000;
   border-radius: 30px;
+
+  @media $mobile {
+    font-size: 14px;
+  }
 }
 
 .cta a::after {
@@ -121,12 +151,20 @@
   left: 50%;
   z-index: -1;
 
-  width: 278px;
-  height: 130px;
-  background-image: url("data:image/svg+xml,%3Csvg width='278' height='130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M234 65c0 11.598-9.402 21-21 21H65c-11.598 0-21-9.402-21-21s9.402-21 21-21h148c11.598 0 21 9.402 21 21Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg filter='url(%23c)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M234 65c0 11.598-9.402 21-21 21H65c-11.598 0-21-9.402-21-21s9.402-21 21-21h148c11.598 0 21 9.402 21 21Z' fill='url(%23d)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='230.935' y1='65' x2='44' y2='65' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFBA54'/%3E%3Cstop offset='1' stop-color='%23907EFF'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='230.935' y1='65' x2='44' y2='65' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFBA54'/%3E%3Cstop offset='1' stop-color='%23907EFF'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='0' y='0' width='278' height='130' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='22' result='effect1_foregroundBlur_5_151'/%3E%3C/filter%3E%3Cfilter id='c' x='15' y='15' width='248' height='100' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='14.5' result='effect1_foregroundBlur_5_151'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
+  width: 602px;
+  height: 81px;
+
+  background-image: url("data:image/svg+xml,%3Csvg width='602' height='81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='M182.424 30h237.153c12.262 1.63 12.262 19.37 0 21H182.424c-12.262-1.63-12.262-19.37 0-21Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg opacity='.2' filter='url(%23c)'%3E%3Cpath d='M456.062 53H145.938c-12.648-1.286-12.648-19.714 0-21h310.124c12.648 1.286 12.648 19.714 0 21Z' fill='url(%23d)'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath d='M176.905 36h248.19L568 41.5 425.095 47h-248.19L34 41.5 176.905 36Z' fill='url(%23f)'/%3E%3C/g%3E%3Cg filter='url(%23g)'%3E%3Crect x='214.245' y='23' width='173.508' height='35' rx='17.5' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='134.578' y1='40.956' x2='475.16' y2='40.67' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='518.63' y1='42.044' x2='73.253' y2='42.534' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='73.191' y1='41.5' x2='536.402' y2='41.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239F39E4'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='226.979' y1='40.5' x2='377.486' y2='40.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='150.228' y='7' width='301.546' height='67' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='c' x='113.452' y='9' width='375.096' height='67' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='e' x='0' y='2' width='602' height='79' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='g' x='191.245' y='0' width='219.508' height='81' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
   transform: translate(-50%, -50%);
 
   content: '';
+
+  @media $mobile {
+    width: 650px;
+    height: 83px;
+
+    background-image: url("data:image/svg+xml,%3Csvg width='650' height='83' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='M174.448 30h301.105c13.675 1.569 13.675 21.431 0 23H174.448c-13.675-1.569-13.675-21.431 0-23Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg opacity='.2' filter='url(%23c)'%3E%3Cpath d='M521.876 53H128.124c-14.047-1.232-14.047-21.768 0-23h393.752c14.047 1.232 14.047 21.768 0 23Z' fill='url(%23d)'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath d='M167.441 36h315.118L664 42.5 482.559 49H167.441L-14 42.5 167.441 36Z' fill='url(%23f)'/%3E%3C/g%3E%3Cg filter='url(%23g)'%3E%3Crect x='215.675' y='23' width='218.65' height='37' rx='18.5' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='113.699' y1='42' x2='546.124' y2='41.578' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='601.316' y1='41' x2='35.839' y2='41.722' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='35.76' y1='42.5' x2='623.881' y2='42.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239F39E4'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='231.722' y1='41.5' x2='421.387' y2='41.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='141.192' y='7' width='367.617' height='69' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='c' x='94.588' y='7' width='460.823' height='69' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='e' x='-48' y='2' width='746' height='81' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='g' x='192.675' y='0' width='264.65' height='83' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
+  }
 }
 
 .center {

package/src/DonatesTeaser/index.tsx

@@ -17,15 +17,16 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
 
   const data = {
     ru: {
-      title: '«Медуза» работает для вас',
-      subtitle: 'Нам нужна ваша поддержка',
-      button: 'Да!',
+      title: 'Успеть сделать важное дело:<br/>Поддержать «Медузу» — ',
+      // subtitle: 'Нам нужна ваша поддержка',
+      button: 'Бегу!',
       href: 'https://support.meduza.io'
     },
     en: {
-      title: 'Meduza is working for you',
-      subtitle: 'And we need your support',
-      button: 'Okay!',
+      title:
+        'There’s still time for a good deed&nbsp;in&nbsp;2021!<br/>Support Meduza — ',
+      // subtitle: 'And we need your support',
+      button: 'Donate',
       href: 'https://support.meduza.io/en'
     }
   }
@@ -35,11 +36,11 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
       <div className={styles.main}>
         <h3 className={styles.title}>
           <span dangerouslySetInnerHTML={{ __html: data[lang].title }} />
-          {` `}
+          {/* {` `}
           <span
             className={styles.text}
             dangerouslySetInnerHTML={{ __html: data[lang].subtitle }}
-          />
+          /> */}
         </h3>
       </div>
 

package/src/RenderBlocks/index.tsx

@@ -17,6 +17,7 @@ import { Table } from '../Table'
 import { MaterialNote } from '../MaterialNote'
 import { SensitiveBlock } from '../SensitiveBlock'
 import { DonatesTeaser } from '../DonatesTeaser'
+import { AnnouncementInText } from '../AnnouncementInText'
 
 export const RenderBlocks: React.FC<RenderBlocksProps> = ({
   block,
@@ -126,6 +127,9 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
     case 'material_note':
       return <MaterialNote block={block} styleContext={styleContext} />
 
+    case 'announcement_in_text':
+      return <AnnouncementInText styleContext={styleContext} lang={lang} />
+
     default: {
       return null
     }

package/src/index.tsx

@@ -41,4 +41,5 @@ export * from './RelatedRichBlock'
 export * from './SensitiveBlock'
 export * from './DonatesTeaser'
 export * from './ShopRelatedBlock'
+export * from './AnnouncementInText'
 // /* PLOP_INJECT_LINK */ //