@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/Popover/Popover.module.css

@@ -0,0 +1,134 @@
+@import '../vars.css';
+
+.root {
+  position: fixed;
+  z-index: $zIndex-10;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row;
+
+  width: 100%;
+  height: 100%;
+  min-height: 120px;
+  padding: 10px 10px 0;
+
+  animation: fadeOut 250ms ease both 100ms;
+
+  opacity: 1;
+}
+
+.root.visible {
+  animation: fadeIn 250ms ease both;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  background-color: rgba(0, 0, 0, 0.7);
+
+  contain: '';
+}
+
+.container {
+  position: relative;
+
+  flex: 1;
+
+  max-width: 420px;
+  min-height: 80px;
+  margin: 0 auto;
+  padding: 15px 20px 40px;
+
+  animation: disappear 350ms ease both;
+}
+
+.dismiss {
+  position: absolute;
+  top: -23px;
+  left: 50%;
+
+  width: 50px;
+  height: 36px;
+  padding: 0;
+
+  transform: translateX(-50%);
+
+  opacity: 0.4;
+  border-width: 0;
+  border-radius: 0;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.445 1.832l6.946 4.63a2 2 0 0 0 2.218 0l6.946-4.63a1 1 0 1 0-1.11-1.664L8.5 4.798 1.555.168a1 1 0 1 0-1.11 1.664z' fill='%23F7F7F7' fill-rule='nonzero'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  box-shadow: none;
+
+  appearance: none;
+}
+
+.background {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+
+  width: 100%;
+  height: 100%;
+
+  border-radius: 8px 8px 0 0;
+}
+
+.background rect {
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+}
+
+.visible .container {
+  animation: appear 350ms ease both;
+}
+
+@keyframes appear {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes disappear {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/src/Popover/Popover.stories.module.css

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

package/src/Popover/Popover.stories.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+
+import { Popover } from './'
+import { Button } from '../Button'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './Popover.stories.module.css'
+
+export default {
+  title: 'Main / Popover',
+  component: Popover,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const [isPopoverShown, setIsPopoverShown] = useState(false)
+
+  return (
+    <>
+      <div className={styles.root}>
+        <Button
+          size="default"
+          theme="gold"
+          onClick={(): void => {
+            setIsPopoverShown(!isPopoverShown)
+          }}
+        >
+          Показать поповер
+        </Button>
+
+        {isPopoverShown && (
+          <Popover
+            onClose={(): void => {
+              setIsPopoverShown(false)
+            }}
+          >
+            Здесь мог бы быть ваш компонент
+          </Popover>
+        )}
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Popover/Popover.test.tsx

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

package/src/Popover/Popover.types.ts

@@ -0,0 +1,4 @@
+export interface PopoverProps {
+  children: JSX.Element[] | JSX.Element
+  onClose: () => void
+}

package/src/Popover/index.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react'
+import { PopoverProps } from './Popover.types'
+import makeClassName from '../utils/makeClassName'
+
+import styles from './Popover.module.css'
+
+export const Popover: React.FC<PopoverProps> = ({ children, onClose }) => {
+  const [visible, setVisible] = useState(true)
+
+  const handleClose = (): void => {
+    setVisible(false)
+    setTimeout(onClose, 350)
+  }
+
+  const handleScroll = (): void => {
+    handleClose()
+  }
+
+  const escFunction = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+      handleClose()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('keydown', escFunction, false)
+    window.addEventListener('scroll', handleScroll, false)
+
+    return () => {
+      window.removeEventListener('keydown', escFunction, false)
+      window.removeEventListener('scroll', handleScroll, false)
+    }
+  }, [visible])
+
+  /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+  return (
+    <div
+      data-testid="popover"
+      className={makeClassName([
+        [styles.root, true],
+        [styles.visible, visible]
+      ])}
+    >
+      <div className={styles.overlay} onClick={(): void => handleClose()} />
+
+      <div className={styles.container}>
+        <button
+          type="button"
+          className={styles.dismiss}
+          onClick={(): void => handleClose()}
+          aria-label="dismiss"
+        />
+        <svg width="100%" className={styles.background}>
+          <defs>
+            <mask id="myMask" x="0" y="0" width="100%" height="100%">
+              <rect fill="white" y="0" width="100%" height="100%" x="0" />
+              <svg x="50%" overflow="visible">
+                <g transform="translate(-12 0)">
+                  <path d="M4.61852778e-14,9.76996262e-15 L9.84597532,5.80270273 C11.0992017,6.54128882 12.6546044,6.54128882 13.9078308,5.80270273 L23.7538061,9.76996262e-15 L4.61852778e-14,9.76996262e-15 Z" />
+                </g>
+              </svg>
+            </mask>
+          </defs>
+          <rect
+            fill="#F7F7F7"
+            id="base-mask"
+            mask="url(#myMask)"
+            x="0"
+            y="0"
+            width="100%"
+            height="100%"
+          />
+        </svg>
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/QuoteBlock/QuoteBlock.module.css

@@ -0,0 +1,79 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  margin-bottom: 14px;
+  padding-left: 18px;
+
+  font-family: $primaryFont;
+  font-size: 18px;
+  line-height: 24px;
+
+  @media $mobile {
+    margin: 0 0 20px;
+    padding-left: 36px;
+
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.root + .root {
+  margin-top: -14px;
+  padding-top: 14px;
+
+  @media $mobile {
+    margin-top: -20px;
+    padding-top: 20px;
+  }
+}
+
+.root + .root::before {
+  top: -10px;
+}
+
+.root:before {
+  position: absolute;
+  top: 5px;
+  bottom: 7px;
+  left: 0;
+
+  width: 4px;
+
+  content: '';
+
+  border-radius: 2px;
+  background-color: #ebebeb;
+
+  @media $mobile {
+    top: 4px;
+    bottom: 6px;
+  }
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root p {
+  margin: 0;
+}
+
+.root a {
+  text-decoration: none;
+
+  color: inherit;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.root a:hover {
+  color: $gold;
+}
+
+.center {
+  width: 100%;
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}

package/src/QuoteBlock/QuoteBlock.stories.module.css

@@ -0,0 +1,7 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+
+  max-width: 650px;
+}

package/src/QuoteBlock/QuoteBlock.stories.tsx

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

package/src/QuoteBlock/QuoteBlock.test.tsx

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

package/src/QuoteBlock/QuoteBlock.types.ts

@@ -0,0 +1,6 @@
+export interface QuoteBlockProps {
+  styleContext?: string | string[]
+  block: {
+    data: string
+  }
+}

package/src/QuoteBlock/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { QuoteBlockProps } from './QuoteBlock.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import styles from './QuoteBlock.module.css'
+
+export const QuoteBlock: React.FC<QuoteBlockProps> = ({
+  block: { data },
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [[styles.root, true]]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="quote-block" className={makeClassName(classNames)}>
+      <p dangerouslySetInnerHTML={{ __html: data }} />
+    </div>
+  )
+}

package/src/QuoteBlock/mock.json

@@ -0,0 +1,6 @@
+{
+  "type": "quote",
+  "data": "Да, мы отменили проведение конкурса. Нас обвиняют во всех грехах, что мы хотим снести мавзолей и вынести тело Ленина. Где они это взяли? Это невозможно. Очень много негатива.",
+  "length": 174,
+  "id": "1-6299db8f2ba44119e88e5669cea1a928583c85a604030b300dc2466e8cde8d6d"
+}

package/src/RawHtmlBlock/RawHtmlBlock.stories.module.css

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

package/src/RawHtmlBlock/RawHtmlBlock.stories.tsx

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

package/src/RawHtmlBlock/RawHtmlBlock.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { RawHtmlBlock } from './'
+import { RawHtmlBlockProps } from './RawHtmlBlock.types'
+import styles from './RawHtmlBlock.module.css'
+
+describe('Raw Html Block', () => {
+  let props: RawHtmlBlockProps
+
+  const renderComponent = () => render(<RawHtmlBlock {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const rawHtmlBlock = getByTestId('raw-html-block')
+
+    expect(rawHtmlBlock).toHaveClass(styles.root)
+  })
+})

package/src/RawHtmlBlock/RawHtmlBlock.types.ts

@@ -0,0 +1,9 @@
+export interface RawHtmlBlockProps {
+  block: any
+  styleContext: string[] | string
+  isRead: boolean
+  isListened: boolean
+  isInBookmarks: boolean
+  bookmarkAction?: (service: string, place: string) => void
+  lightBox?: () => void
+}

package/src/RawHtmlBlock/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { RawHtmlBlockProps } from './RawHtmlBlock.types'
+
+import { ImportantLead } from '../ImportantLead'
+import { RenderBlocks } from '../RenderBlocks'
+import { Spoiler } from '../Spoiler'
+import { HalfBlock } from '../HalfBlock'
+import { Cover } from '../Cover'
+
+import { BlockProvider } from '../utils/BlockContext'
+
+export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
+  block,
+  styleContext,
+  isRead,
+  isListened,
+  isInBookmarks,
+  bookmarkAction,
+  lightBox
+}) => {
+  const context = {
+    lightBox: lightBox || null
+  }
+
+  switch (block.type) {
+    case 'important_lead': {
+      return <ImportantLead block={block} styleContext={styleContext} />
+    }
+
+    case 'spoiler': {
+      return <Spoiler block={block} styleContext={styleContext} />
+    }
+
+    case 'cover': {
+      return <Cover block={block} styleContext={styleContext} />
+    }
+
+    case 'half': {
+      return <HalfBlock block={block} styleContext={styleContext} />
+    }
+
+    default: {
+      return (
+        <BlockProvider value={context}>
+          <RenderBlocks
+            block={block}
+            styleContext={styleContext}
+            isRead={isRead}
+            isListened={isListened}
+            isInBookmarks={isInBookmarks}
+            bookmarkAction={bookmarkAction}
+          />
+        </BlockProvider>
+      )
+    }
+  }
+}