@meduza/ui-kit-2 0.2.4 → 0.2.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.4",
+  "version": "0.2.6",
   "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://mdza.io/FNtRa28cc1o'
+    },
+
+    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://mdza.io/c-m1LRBgwEA'
+    }
+  }
+
+  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/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 */ //