@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/SourceBlock/SourceBlock.module.css

@@ -0,0 +1,110 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+
+  margin: 18px 0 15px;
+  padding: 12px 11px 13px;
+
+  color: #000;
+  border-left: 4px solid $gold;
+  border-radius: 2px 8px 8px 2px;
+  background-color: $platinum;
+
+  font-size: 16px;
+  line-height: 20px;
+
+  @media $portraitTablet {
+    margin-top: 25px;
+    margin-bottom: 25px;
+    padding: 18px 16px 12px;
+  }
+}
+
+.root:hover,
+.root:visited {
+  background-color: #ededed;
+}
+
+.root blockquote {
+  margin: 0;
+}
+
+.root a {
+  text-decoration: none;
+
+  color: inherit;
+}
+
+.text {
+  font-family: $secondaryFont;
+}
+
+.text p {
+  margin: 0;
+
+  font-size: 16px;
+  line-height: 22px;
+
+  @media $portraitTablet {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+
+.root p + p {
+  margin-top: 12px;
+}
+
+.root footer {
+  margin-top: 12px;
+  padding-top: 10px;
+
+  border-top: 1px solid #d6d6d6;
+
+  @media $portraitTablet {
+    margin-top: 18px;
+    padding-top: 12px;
+  }
+}
+
+.origin {
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  pointer-events: none;
+
+  color: #292929;
+
+  font-family: $secondaryFont;
+  font-size: 16px;
+  font-weight: bold;
+  font-style: normal;
+  line-height: 22px;
+
+  @media $portraitTablet {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+
+.center {
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/SourceBlock/SourceBlock.stories.module.css

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

package/src/SourceBlock/SourceBlock.stories.tsx

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

package/src/SourceBlock/SourceBlock.test.tsx

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

package/src/SourceBlock/SourceBlock.types.ts

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

package/src/SourceBlock/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { SourceBlockProps } from './SourceBlock.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+import DangerousHTML from '../utils/DangerousHtml'
+
+import styles from './SourceBlock.module.css'
+
+export const SourceBlock: React.FC<SourceBlockProps> = ({
+  block: { only_on: onlyOn, quote, origin, url },
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], true]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <blockquote
+      data-testid="source-block"
+      cite={url}
+      className={makeClassName(classNames)}
+    >
+      <a
+        className={styles.text}
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {quote.map((item, index) => (
+          <DangerousHTML key={index} html={item.data} tagName="p" />
+        ))}
+        <footer>
+          <cite className={styles.origin}>{origin}</cite>
+        </footer>
+      </a>
+    </blockquote>
+  )
+}

package/src/Spoiler/Spoiler.module.css

@@ -0,0 +1,177 @@
+@import '../vars.css';
+
+.root {
+  width: 100%;
+  margin: $gapMedium 0;
+  padding: 21px 0 22px;
+
+  border-top: 3px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
+
+  @media $mobile {
+    display: flex;
+    flex-flow: column nowrap;
+
+    margin: 25px auto 20px;
+    padding: 20px 0;
+  }
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root:first-child {
+  margin-top: 0;
+}
+
+.header {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+}
+
+.header h3 {
+  margin-top: 0;
+  margin-bottom: 18px;
+
+  font-family: $secondaryFont;
+  font-size: 21px;
+  font-weight: 700;
+  line-height: 26px;
+
+  @media $mobile {
+    margin-bottom: 20px;
+
+    font-size: 28px;
+    line-height: 34px;
+  }
+}
+
+.body {
+  display: none;
+
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-bottom: 13px;
+
+  @media $mobile {
+    order: 2;
+
+    padding-top: 25px;
+    padding-bottom: 0;
+  }
+}
+
+.spoiled {
+  min-height: auto;
+}
+
+.spoiled .body {
+  display: block;
+}
+
+.footer {
+  position: static;
+}
+
+.spoiled .footer {
+  position: sticky;
+  z-index: 10;
+  bottom: 0;
+
+  margin-right: -20px;
+  margin-left: -20px;
+  padding: 12px 20px 20px;
+
+  animation: spoilerSticky 500ms ease both;
+
+  background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, #fff 64% );
+
+  @media $mobile {
+    position: static;
+
+    margin-right: 0;
+    margin-left: 0;
+    padding: 0;
+
+    animation: none;
+
+    background-image: none;
+  }
+}
+
+.spoiled .footer::after {
+  position: absolute;
+  z-index: -1;
+  top: 100%;
+  right: 0;
+  left: 0;
+
+  height: 16px;
+
+  content: '';
+
+  background-color: #fff;
+
+  @media $mobile {
+    content: none;
+  }
+}
+
+.spoiled .footer svg {
+  transform: rotate(180deg) translateY(1px);
+}
+
+.center {
+  @media $mobile {
+    max-width: 980px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.full {
+  max-width: 980px;
+}
+
+.default {
+  max-width: 650px;
+}
+
+@keyframes spoilerSticky {
+  0% {
+    transform: translateY(62px);
+  }
+  50% {
+    transform: translateY(-16px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+[data-gdpr-panel='true'] .spoiled .footer {
+  bottom: 45px;
+
+  @media $mobile {
+    bottom: 46px;
+  }
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/Spoiler/Spoiler.stories.module.css

@@ -0,0 +1,8 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+
+  width: 100%;
+  max-width: 1000px;
+}

package/src/Spoiler/Spoiler.stories.tsx

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

package/src/Spoiler/Spoiler.test.tsx

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

package/src/Spoiler/Spoiler.types.ts

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

package/src/Spoiler/index.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useRef } from 'react'
+import { SpoilerProps } from './Spoiler.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+import postMessage from '../utils/postMessage'
+
+import { RenderBlocks } from '../RenderBlocks'
+import { Button } from '../Button'
+import { SvgSymbol } from '../SvgSymbol'
+
+import styles from './Spoiler.module.css'
+
+export const Spoiler: React.FC<SpoilerProps> = ({
+  block: {
+    display,
+    button,
+    only_on: onlyOn,
+    btn_title: buttonTitle,
+    title,
+    blocks
+  },
+  styleContext
+}) => {
+  const [spoiled, setSpoiled] = useState(false)
+  const ref = useRef(null)
+
+  const handleButtonClick = (): void => {
+    setSpoiled(!spoiled)
+
+    if (spoiled) {
+      postMessage('closeSpoiler', 'click')
+      const rect = ref.current.getBoundingClientRect()
+      if (rect.top < 0) {
+        ref.current.scrollIntoView({ behavior: 'smooth' })
+      }
+    } else {
+      postMessage('openSpoiler', 'click')
+    }
+  }
+
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], !!onlyOn],
+    [styles[display], !!display && styles[display]],
+    [[styles.spoiled], !!spoiled]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  const buttonCollapse = button ? button.collapse : 'Свернуть'
+  const buttonExpande = button ? button.expand : buttonTitle
+
+  return (
+    <div ref={ref} className={makeClassName(classNames)} data-testid="spoiler">
+      <div className={styles.header}>{title && <h3>{title}</h3>}</div>
+      <div className={styles.body}>
+        {blocks.map(item => (
+          <RenderBlocks
+            key={item.id}
+            block={item}
+            styleContext={styleContext}
+          />
+        ))}
+      </div>
+      <div className={styles.footer}>
+        <Button
+          size="default"
+          theme="gray"
+          onClick={(): void => handleButtonClick()}
+          styleContext="isInSpoiler"
+        >
+          {spoiled ? buttonCollapse : buttonExpande}
+          <SvgSymbol icon="arrow" />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/Spoiler/mock.json

@@ -0,0 +1,49 @@
+{
+  "type": "spoiler",
+  "title": "Фигуранты дела против Сергея Фургала",
+  "btn_title": "Обвиняемые и свидетели ",
+  "blocks": [
+    {
+      "type": "p",
+      "data": "<strong>Сергей Фургал</strong> — бывший губернатор Хабаровского края, арестован 9 июля,<a href=\"https://sledcom.ru/news/item/1480569/\" target=\"_blank\" rel=\"noopener\"> обвиняется</a> в организации убийств Евгения Зори, Олега Булатова и покушении на убийство Александра Смольского. По<a href=\"https://sledcom.ru/news/item/1483339/\" target=\"_blank\" rel=\"noopener\"> данным СК</a>, в 2004 году вместе с Николаем Мистрюковым он уже задерживался в качестве подозреваемого в убийстве Зори, но в 2004 году уголовное преследование Фургала было прекращено.",
+      "length": 362,
+      "id": "0-2199ee878d0e85daac2c80f8a94960476225226bcb9d4fe446e462d97e3acfa9"
+    },
+    {
+      "type": "p",
+      "data": "<strong>Николай Мистрюков</strong> — бывший деловой партнер Фургала и партнер его жены, Ларисы Стародубовой. Находился в СИЗО с 19 ноября до 10 сентября, ключевой свидетель обвинения, признал вину и переведен под домашний арест.",
+      "length": 211,
+      "id": "1-6cf50ace63107cf021c5c49c8536776435d470c872a37b11bf32e04a83859157"
+    },
+    {
+      "type": "p",
+      "data": "<strong>Владимир Першин</strong> — бывший сотрудник уголовного розыска Хабаровска, осужденный в 2016 году за вымогательство. Еще один ключевой свидетель обвинения. ",
+      "length": 147,
+      "id": "2-39a95b2b3b5f5bb8dbd23576941020b54b4f5bfade9eac192aa48cc007ec25df"
+    },
+    {
+      "type": "p",
+      "data": "<strong>Андрей Карепов</strong> — бывший сотрудник Фургала. Задержан 19 ноября, находится в СИЗО. Вину не признает. В конце августа, как сообщала его защита, был избит по дороге в следственный комитет. Избившие его люди требовали дать показания на Фургала. ",
+      "length": 240,
+      "id": "3-eae115529aa63044c041ba6bd17e99bb204c985b56ecb9bcfbcc95050c273892"
+    },
+    {
+      "type": "p",
+      "data": "<strong>Марат Кадыров</strong> — контролер аэропорта Менделеево на дальневосточном острове Кунашир. Задержан 19 ноября, обвиняется в том, что кинул гранату в гараж предпринимателя Александра Смольского. ",
+      "length": 186,
+      "id": "4-0b88a13469d697137b070feaa4914cc37f85dda4cab4dedf6767fb34a632c6ec"
+    },
+    {
+      "type": "p",
+      "data": "<strong>Андрей Палей</strong> — предприниматель. Задержан 19 ноября. Обвиняется в убийстве Евгения Зори и Олега Булатова.",
+      "length": 104,
+      "id": "5-7f14330e3b1672618cecb7720806d0d075a6bead118925f711318689f3d9e06b"
+    }
+  ],
+  "button": {
+    "expand": "Обвиняемые и свидетели ",
+    "collapse": "Свернуть"
+  },
+  "display": "default",
+  "id": "4-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
+}