@meduza/ui-kit-2 0.1.19 → 0.1.21

package/dist/utils/converCase.d.ts

@@ -0,0 +1,2 @@
+export declare const toCamel: (s: string) => string;
+export declare const toCapitalize: (s: string) => string;

package/dist/utils/generateGradient.d.ts

@@ -1,2 +1,2 @@
-declare const generateGradient: (color: string) => string;
+declare const generateGradient: (color: string, type: string) => string;
 export default generateGradient;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -67,6 +67,7 @@
     "@storybook/react": "^6.0.21",
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/react": "^10.4.7",
+    "@types/jest": "26.0.14",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
     "@typescript-eslint/eslint-plugin": "^4.2.0",
@@ -79,6 +80,7 @@
     "eslint-plugin-react": "^7.21.0",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.5.3",
     "lint-staged": "^10.2.11",
     "plop": "^2.7.1",
     "postcss-import": "^12.0.1",
@@ -97,6 +99,7 @@
     "stylelint-config-sass-guidelines": "^7.0.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
+    "ts-jest": "26.4.1",
     "ts-loader": "^8.0.1",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tsdx": "^0.13.2",

package/src/BookmarkButton/BookmarkButton.test.tsx

@@ -2,13 +2,16 @@ import React from 'react'
 import { render } from '@testing-library/react'
 
 import { BookmarkButton } from './'
-import { BookmarkButtonProps } from './BookmarkButton.types'
 import styles from './BookmarkButton.module.css'
 
 describe('Bookmark Button', () => {
-  let props: BookmarkButtonProps
-
-  const renderComponent = () => render(<BookmarkButton {...props} />)
+  const renderComponent = () =>
+    render(
+      <BookmarkButton
+        onClick={(): void => alert('true')}
+        isInBookmarks={false}
+      />
+    )
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()
@@ -17,4 +20,14 @@ describe('Bookmark Button', () => {
 
     expect(bookmarkButton).toHaveClass(styles.root)
   })
+
+  // it('should change class on click', () => {
+  //   const { getByTestId } = renderComponent()
+
+  //   const bookmarkButton = getByTestId('bookmark-button')
+
+  //   fireEvent.click(bookmarkButton)
+
+  //   expect(bookmarkButton).toHaveClass(styles.isInBookmarks)
+  // })
 })

package/src/CardTitle/CardTitle.test.tsx

@@ -5,10 +5,11 @@ import { CardTitleProps } from './CardTitle.types'
 
 import styles from './CardTitle.module.css'
 
-describe('Card Title', () => {
-  let props: CardTitleProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<CardTitle {...props} />)
+describe('Card Title', () => {
+  const renderComponent = () =>
+    render(<CardTitle block={mock as CardTitleProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/ChapterBlock/ChapterBlock.test.tsx

@@ -5,10 +5,11 @@ import { ChapterBlockProps } from './ChapterBlock.types'
 
 import styles from './ChapterBlock.module.css'
 
-describe('Chapter Block', () => {
-  let props: ChapterBlockProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<ChapterBlock {...props} />)
+describe('Chapter Block', () => {
+  const renderComponent = () =>
+    render(<ChapterBlock block={mock as ChapterBlockProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/Cover/Cover.test.tsx

@@ -4,11 +4,11 @@ import { Cover } from './'
 import { CoverProps } from './Cover.types'
 
 import styles from './Cover.module.css'
+import mock from './mock.json'
 
 describe('Cover', () => {
-  let props: CoverProps
-
-  const renderComponent = () => render(<Cover {...props} />)
+  const renderComponent = () =>
+    render(<Cover block={mock as CoverProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/Cover/Cover.types.ts

@@ -1,4 +1,25 @@
+import { OptimizedImageItem } from '../types'
+
 export interface CoverProps {
-  block: any
+  block: {
+    only_on?: string
+    data: {
+      blocks: any
+      cover: {
+        credit?: string
+        caption?: string
+        cc: string
+        urls: {
+          w325: OptimizedImageItem
+          w600: OptimizedImageItem
+        }
+        mobile_ratio: number
+        gradients: {
+          text_rgb: string
+          bg_rgb: string
+        }
+      }
+    }
+  }
   styleContext?: string[] | string
 }

package/src/Cover/index.tsx

@@ -38,7 +38,7 @@ export const Cover: React.FC<CoverProps> = ({
 
     classNames = makeStyleContext(classNames, theme, styles)
 
-    style.backgroundImage = generateGradient(gradients.bg_rgb)
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom')
   }
 
   const renderCC = (context?: string): JSX.Element => (

package/src/DocumentItemsCount/DocumentItemsCount.test.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { DocumentItemsCount } from './'
-import { DocumentItemsCountProps } from './DocumentItemsCount.types'
+// import { DocumentItemsCountProps } from './DocumentItemsCount.types'
 
 import styles from './DocumentItemsCount.module.css'
 
 describe('Document Items Count', () => {
-  let props: DocumentItemsCountProps
+  // let props: DocumentItemsCountProps
 
-  const renderComponent = () => render(<DocumentItemsCount {...props} />)
+  const renderComponent = () =>
+    render(<DocumentItemsCount type="card" items={4} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/DotsOnImage/DotsOnImage.test.tsx

@@ -3,6 +3,8 @@ import { render } from '@testing-library/react'
 import mock from './mock.json'
 import { DotsOnImage } from './'
 
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
+
 import styles from './DotsOnImage.module.css'
 
 describe('Dots On Image', () => {
@@ -11,8 +13,8 @@ describe('Dots On Image', () => {
   const renderComponent = () => render(<DotsOnImage block={data} />)
 
   it('should have root style', () => {
-  const { getByTestId } = renderComponent()
-
+    const { getByTestId } = renderComponent()
+    mockAllIsIntersecting(true)
     const dotsOnImage = getByTestId('dots-on-image')
 
     expect(dotsOnImage).toHaveClass(styles.root)

package/src/DotsOnImage/DotsOnImage.types.ts

@@ -1,4 +1,4 @@
-import { OptimizedImageItem } from '../Image/Image.types'
+import { OptimizedImageItem } from '../types'
 
 export interface PopoverData {
   title?: string

package/src/EmbedBlock/EmbedBlock.test.tsx

@@ -5,13 +5,26 @@ import { EmbedBlockProps } from './EmbedBlock.types'
 
 import styles from './EmbedBlock.module.css'
 
-describe('Embed Block', () => {
-  let props: EmbedBlockProps
+import mock from './mock.json'
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
 
-  const renderComponent = () => render(<EmbedBlockContainer {...props} />)
+describe('Embed Block', () => {
+  const renderComponent = () =>
+    render(
+      <div>
+        {mock.blocks.map((block) => (
+          <EmbedBlockContainer
+            block={block as EmbedBlockProps['block']}
+            lang="ru"
+            key={block.id}
+          />
+        ))}
+      </div>
+    )
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()
+    mockAllIsIntersecting(true)
 
     const embedBlock = getByTestId('embed-block')
 

package/src/EmbedBlock/index.tsx

@@ -8,7 +8,7 @@ export const EmbedBlockContainer: React.FC<EmbedBlockProps> = ({
   styleContext,
   lang
 }) => {
-  if (block.data.wrap_with_iframe) {
+  if (block.data && block.data.wrap_with_iframe) {
     return <IframeBlock block={block} styleContext={styleContext} lang={lang} />
   }
   return <EmbedBlock block={block} styleContext={styleContext} />

package/src/GroupedBlock/GroupedBlock.test.tsx

@@ -4,14 +4,16 @@ import { GroupedBlock } from './'
 import { GroupedBlockProps } from './GroupedBlock.types'
 
 import styles from './GroupedBlock.module.css'
+import mock from './mock.json'
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
 
 describe('Grouped Block', () => {
-  let props: GroupedBlockProps
-
-  const renderComponent = () => render(<GroupedBlock {...props} />)
+  const renderComponent = () =>
+    render(<GroupedBlock block={mock as GroupedBlockProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()
+    mockAllIsIntersecting(true)
 
     const groupedBlock = getByTestId('grouped-block')
 

package/src/HalfBlock/HalfBlock.test.tsx

@@ -5,10 +5,11 @@ import { HalfBlockProps } from './HalfBlock.types'
 
 import styles from './HalfBlock.module.css'
 
-describe('Half Block', () => {
-  let props: HalfBlockProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<HalfBlock {...props} />)
+describe('Half Block', () => {
+  const renderComponent = () =>
+    render(<HalfBlock block={mock as HalfBlockProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/Image/Image.test.tsx

@@ -4,6 +4,8 @@ import { Image } from './'
 
 import styles from './Image.module.css'
 
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
+
 import mock from './mock.json'
 
 describe('Image', () => {
@@ -25,6 +27,7 @@ describe('Image', () => {
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()
+    mockAllIsIntersecting(true)
 
     const image = getByTestId('image')
 

package/src/Image/Image.types.ts

@@ -1,9 +1,4 @@
-export interface OptimizedImageItem {
-  '1x': string
-  '2x': string
-  '1x_webp': string
-  '2x_webp': string
-}
+import { OptimizedImageItem } from '../types'
 
 export interface ImageProps {
   alt?: string

package/src/Image/RenderPicture.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { PictureProps } from './Image.types'
 import { imageBreakpoints, imageConditionalKeys } from '../constants'
-import { toCamel } from '../utils/toCamel'
+import { toCamel } from '../utils/converCase'
 
 export const RenderPicture: React.FC<PictureProps> = ({
   source,

package/src/ImportantLead/ImportantLead.test.tsx

@@ -3,18 +3,20 @@ import { render } from '@testing-library/react'
 import { ImportantLead } from './'
 import { ImportantLeadProps } from './ImportantLead.types'
 
-import styles from './ImportantLead.module.css'
+import mock from './mock.json'
 
 describe('Important Lead', () => {
-  let props: ImportantLeadProps
 
-  const renderComponent = () => render(<ImportantLead {...props} />)
+  const renderComponent = () =>
+    render(
+      <div>
+        <ImportantLead block={mock as ImportantLeadProps['block']} />
+      </div>
+    )
 
-  it('should have root style', () => {
-    const { getByTestId } = renderComponent()
+  it('should have some blocks', () => {
+    const { getByText } = renderComponent()
 
-    const importantLead = getByTestId('important-lead')
-
-    expect(importantLead).toHaveClass(styles.root)
+    getByText('Hello Component')
   })
 })

package/src/ImportantLead/mock.json

@@ -1,6 +1,12 @@
 {
   "type": "important_lead",
   "data": [
+    {
+      "type": "p",
+      "data": "Hello Component",
+      "length": 0,
+      "id": "3-0-932322024caa3bc0ff717400f1ba00da2dc3879b55eb574a5de2817dea059184e551"
+    },
     {
       "type": "p",
       "data": "<strong>Что:</strong> Приговор по делу «Седьмой студии»",

package/src/Lazy/Lazy.test.tsx

@@ -3,6 +3,8 @@ import { render } from '@testing-library/react'
 import { Lazy } from './'
 import { LazyProps } from './Lazy.types'
 
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
+
 import styles from './Lazy.module.css'
 
 describe('Lazy', () => {
@@ -12,6 +14,7 @@ describe('Lazy', () => {
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()
+    mockAllIsIntersecting(true)
 
     const lazy = getByTestId('lazy')
 

package/src/ListBlock/ListBlock.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { ListBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import { ListBlockProps } from './ListBlock.types'
 
 import styles from './ListBlock.stories.module.css'
 
@@ -19,7 +20,7 @@ const Example: React.FC = () => {
     <>
       <div className={styles.root}>
         {mock.blocks.map((item) => (
-          <ListBlock block={item} key={item.id} />
+          <ListBlock block={item as ListBlockProps['block']} key={item.id} />
         ))}
       </div>
     </>

package/src/ListBlock/ListBlock.test.tsx

@@ -4,17 +4,21 @@ import { ListBlock } from './'
 import { ListBlockProps } from './ListBlock.types'
 
 import styles from './ListBlock.module.css'
+import mock from './mock.json'
 
 describe('List Block', () => {
-  let props: ListBlockProps
-
-  const renderComponent = () => render(<ListBlock {...props} />)
+  const renderComponent = () =>
+    render(
+      <div>
+        <ListBlock block={mock.blocks[0] as ListBlockProps['block']} />
+      </div>
+    )
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()
 
     const listBlock = getByTestId('list-block')
 
-    expect(listBlock).toHaveClass(styles.root)
+    expect(listBlock).toHaveClass(styles.ul)
   })
 })

package/src/ListBlock/ListBlock.types.ts

@@ -1,4 +1,9 @@
 export interface ListBlockProps {
-  block: any
+  block: {
+    type: keyof JSX.IntrinsicElements
+    data: string[]
+    length: number
+    only_on?: string
+  }
   styleContext?: string[] | string
 }

package/src/ListBlock/index.tsx

@@ -22,7 +22,7 @@ export const ListBlock: React.FC<ListBlockProps> = ({
   }
 
   return (
-    <TagName className={makeClassName(classNames)}>
+    <TagName className={makeClassName(classNames)} data-testid="list-block">
       {data.map((item, index) => (
         <li key={index} dangerouslySetInnerHTML={{ __html: item }} />
       ))}

package/src/ListBlock/mock.json

@@ -18,7 +18,7 @@
         "Вместе с Сергеем Скрипалем в 2018 году были отравлены его дочь, полицейский и случайные прохожие Чарли Роули и Дон Стерджесс, нашедшие флакон с остатками вещества (Стерджесс погибла)."
       ],
       "length": 452,
-      "id": "15-aa8590a46fd0bfceb559be9679920c31c4267320389013f8886d653b5bdbe208"
+      "id": "15-aa8590a46fd0bfceb559be9679920c31efefefc4267320389013f8886d653b5bdbe208"
     }
   ]
 }

package/src/MaterialNote/MaterialNote.test.tsx

@@ -5,10 +5,11 @@ import { MaterialNoteProps } from './MaterialNote.types'
 
 import styles from './MaterialNote.module.css'
 
-describe('Material Note', () => {
-  let props: MaterialNoteProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<MaterialNote {...props} />)
+describe('Material Note', () => {
+  const renderComponent = () =>
+    render(<MaterialNote block={mock as MaterialNoteProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/Meta/Meta.module.css

@@ -54,7 +54,7 @@
 }
 
 .dark {
-  color: #757575;
+  color: rgba(0, 0, 0, 0.4);
 }
 
 .episode,

package/src/QuoteBlock/QuoteBlock.test.tsx

@@ -5,10 +5,11 @@ import { QuoteBlockProps } from './QuoteBlock.types'
 
 import styles from './QuoteBlock.module.css'
 
-describe('Quote Block', () => {
-  let props: QuoteBlockProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<QuoteBlock {...props} />)
+describe('Quote Block', () => {
+  const renderComponent = () =>
+    render(<QuoteBlock block={mock as QuoteBlockProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/RawHtmlBlock/RawHtmlBlock.test.tsx

@@ -3,18 +3,27 @@ import { render } from '@testing-library/react'
 import { RawHtmlBlock } from './'
 import { RawHtmlBlockProps } from './RawHtmlBlock.types'
 
-import styles from './RawHtmlBlock.module.css'
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
+import mock from './mock.json'
 
 describe('Raw Html Block', () => {
-  let props: RawHtmlBlockProps
+  const renderComponent = () =>
+    render(
+      <div>
+        {mock.blocks.map((item) => (
+          <RawHtmlBlock
+            block={item as RawHtmlBlockProps['block']}
+            key={item.id}
+            lightBox={null}
+          />
+        ))}
+      </div>
+    )
 
-  const renderComponent = () => render(<RawHtmlBlock {...props} />)
+  it('should have some blocks', () => {
+    const { getByText } = renderComponent()
+    mockAllIsIntersecting(true)
 
-  it('should have root style', () => {
-    const { getByTestId } = renderComponent()
-
-    const rawHtmlBlock = getByTestId('raw-html-block')
-
-    expect(rawHtmlBlock).toHaveClass(styles.root)
+    getByText('Hello Component')
   })
 })

package/src/RawHtmlBlock/mock.json

@@ -1,5 +1,11 @@
 {
   "blocks": [
+    {
+      "type": "p",
+      "data": "Hello Component",
+      "length": 9,
+      "id": "11-1ff7b114f405e532387ad41ebfc3c794c3baaa413180d495c00a60273f0d2eb400d"
+    },
     {
       "type": "image",
       "data": {

package/src/RelatedBlock/RelatedBlock.test.tsx

@@ -5,10 +5,11 @@ import { RelatedBlockProps } from './RelatedBlock.types'
 
 import styles from './RelatedBlock.module.css'
 
-describe('Related Block', () => {
-  let props: RelatedBlockProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<RelatedBlock {...props} />)
+describe('Related Block', () => {
+  const renderComponent = () =>
+    render(<RelatedBlock block={mock as RelatedBlockProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/RelatedBlock/RelatedBlock.types.ts

@@ -1,4 +1,17 @@
 export interface RelatedBlockProps {
-  block: any
+  block: {
+    data: {
+      title: string
+      related: {
+        title: string
+        second_title?: string
+        layout: string
+        url?: string
+        full_url?: string
+        id: string
+      }[]
+    }
+    only_on?: string
+  }
   styleContext?: string[] | string
 }