@meduza/ui-kit-2 0.1.8 → 0.1.10

package/src/Footnote/Footnote.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Footnote } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './Footnote.stories.module.css'
+
+export default {
+  title: 'Main / Footnote',
+  component: Footnote,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <Footnote onClose={(): void => alert('Handle Close')}>
+          <h3>Заголовок лвлвлдфова выа вовофдывлоа</h3>
+          <p>
+            «Я видел истинного Дональда Трампа, наблюдал за ним. Это обманщик,
+            притворщик и задира. Настоящий паршивец! Все его слова абсурдны
+            и&nbsp;направлены на скандал. Рейган когда-то сказал Горбачёву:
+            «Мистер Горбачёв, развалите эту стену!», а&nbsp;Трамп собирается
+            взводить стену между Америкой и Мексикой.
+          </p>
+        </Footnote>
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Footnote/Footnote.test.tsx

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

package/src/Footnote/Footnote.types.ts

@@ -0,0 +1,5 @@
+import React from 'react'
+export interface FootnoteProps {
+  children: React.ReactNode | JSX.Element[] | JSX.Element
+  onClose: () => void
+}

package/src/Footnote/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { FootnoteProps } from './Footnote.types'
+import makeClassName from '../utils/makeClassName'
+
+import { SvgSymbol } from '../SvgSymbol'
+
+import styles from './Footnote.module.css'
+
+export const Footnote: React.FC<FootnoteProps> = ({ children, onClose }) => {
+  return (
+    <div
+      data-testid="footnote"
+      className={makeClassName([[styles.root, true]])}
+    >
+      <button
+        className={styles.dismiss}
+        type="button"
+        onClick={(): void => onClose()}
+      >
+        <SvgSymbol icon="cross" size="unset" />
+      </button>
+
+      <div className={styles.body}>{children}</div>
+    </div>
+  )
+}

package/src/GroupedBlock/GroupedBlock.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { GroupedBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './GroupedBlock.stories.module.css'
 
 import mock from './mock.json'

package/src/GroupedBlock/GroupedBlock.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { GroupedBlock } from './'
 import { GroupedBlockProps } from './GroupedBlock.types'
+
 import styles from './GroupedBlock.module.css'
 
 describe('Grouped Block', () => {

package/src/GroupedBlock/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import { GroupedBlockProps } from './GroupedBlock.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-
 import { EmbedBlockContainer } from '../EmbedBlock'
 import { MediaCaption } from '../MediaCaption'
 
@@ -14,15 +12,15 @@ export const GroupedBlock: React.FC<GroupedBlockProps> = ({
   block: { only_on: onlyOn },
   styleContext
 }) => {
-  const maxHeight = Math.min(...block.data.map(item => item.data.height))
+  const maxHeight = Math.min(...block.data.map((item) => item.data.height))
 
   const normalizedBoxesWidth = block.data.map(
-    item => item.data.width / (item.data.height / maxHeight)
+    (item) => item.data.width / (item.data.height / maxHeight)
   )
 
   const sumWidth = normalizedBoxesWidth.reduce((sum, x) => sum + x)
 
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true],
     [styles.hasFigcaption, block.cc === 'default'],

package/src/HalfBlock/HalfBlock.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { HalfBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './HalfBlock.stories.module.css'
 
 import mock from './mock.json'

package/src/HalfBlock/HalfBlock.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { HalfBlock } from './'
 import { HalfBlockProps } from './HalfBlock.types'
+
 import styles from './HalfBlock.module.css'
 
 describe('Half Block', () => {

package/src/HalfBlock/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import { HalfBlockProps } from './HalfBlock.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-
 import { RenderBlocks } from '../RenderBlocks'
 import { Image } from '../Image'
 import { MediaCaption } from '../MediaCaption'
@@ -20,7 +18,7 @@ export const HalfBlock: React.FC<HalfBlockProps> = ({
   },
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true]
   ]
@@ -36,7 +34,7 @@ export const HalfBlock: React.FC<HalfBlockProps> = ({
           <Image optimized={optimized} ratio={ratio} display="super_full" />
         </div>
         <div className={styles.body}>
-          {data.blocks.map(item => (
+          {data.blocks.map((item) => (
             <RenderBlocks key={item.id} block={item} styleContext={['rich']} />
           ))}
         </div>

package/src/Image/Image.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { Image } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './Image.stories.module.css'
 
 import mock from './mock.json'

package/src/Image/Image.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { Image } from './'
+
 import styles from './Image.module.css'
 
 import mock from './mock.json'

package/src/Image/Image.types.ts

@@ -18,14 +18,14 @@ export interface ImageProps {
   }
   width?: number
   height?: number
-  source?: object
+  source?: string[]
   lazy?: boolean
   fullscreen?: boolean
   ratio?: number
 }
 
 export interface PictureProps {
-  source?: object
+  source?: string[]
   optimized?: {
     original?: string
     w325: OptimizedImageItem

package/src/Image/RenderPicture.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { PictureProps } from './Image.types'
-
 import { imageBreakpoints, imageConditionalKeys } from '../constants'
 import { toCamel } from '../utils/toCamel'
 
@@ -31,7 +30,7 @@ export const RenderPicture: React.FC<PictureProps> = ({
       )}
 
       {optimized &&
-        keys.map(key => {
+        keys.map((key) => {
           const breakpoint = optimized[`w${key}`]
 
           if (!breakpoint) {

package/src/Image/index.tsx

@@ -1,13 +1,10 @@
 import React, { useContext } from 'react'
 import { ImageProps } from './Image.types'
-
-import makeClassName from '../utils/makeClassName'
-
+import { makeClassName } from '../utils/makeClassName'
 import BlockContext from '../utils/BlockContext'
 import viewportSize from '../utils/viewportSize'
 import postMessage from '../utils/postMessage'
 import { MediaQuerySizes } from '../constants'
-
 import { Lazy } from '../Lazy'
 import RenderPicture from './RenderPicture'
 

package/src/ImportantLead/ImportantLead.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { ImportantLead } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './ImportantLead.stories.module.css'
 
 import mock from './mock.json'

package/src/ImportantLead/ImportantLead.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { ImportantLead } from './'
 import { ImportantLeadProps } from './ImportantLead.types'
+
 import styles from './ImportantLead.module.css'
 
 describe('Important Lead', () => {

package/src/ImportantLead/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import { ImportantLeadProps } from './ImportantLead.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-
 import { RenderBlocks } from '../RenderBlocks'
 
 import styles from './ImportantLead.module.css'
@@ -12,7 +10,7 @@ export const ImportantLead: React.FC<ImportantLeadProps> = ({
   block: { only_on: onlyOn, data },
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], !!onlyOn]
   ]
@@ -23,7 +21,7 @@ export const ImportantLead: React.FC<ImportantLeadProps> = ({
 
   return (
     <div data-testid="important-lead" className={makeClassName(classNames)}>
-      {data.map(item => (
+      {data.map((item) => (
         <RenderBlocks
           key={item.id}
           block={item}

package/src/Lazy/Lazy.stories.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-
 import { Lazy } from './'
 import { Image } from '../Image'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
-import mock from '../Image/mock.json'
+
 import styles from './Lazy.stories.module.css'
 
+import mock from '../Image/mock.json'
+
 export default {
   title: 'Main / Lazy',
   component: Lazy,

package/src/Lazy/Lazy.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { Lazy } from './'
 import { LazyProps } from './Lazy.types'
+
 import styles from './Lazy.module.css'
 
 describe('Lazy', () => {

package/src/Lazy/index.tsx

@@ -1,12 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName } from '../utils/makeClassName'
+import { LazyProps } from './Lazy.types'
 
 import styles from './Lazy.module.css'
 
-import { LazyProps } from './Lazy.types'
-
 export const Lazy: React.FC<LazyProps> = ({ children, threshold }) => {
   const [ref, inView, entry] = useInView({
     threshold: threshold || 0

package/src/ListBlock/ListBlock.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { ListBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './ListBlock.stories.module.css'
 
 import mock from './mock.json'
@@ -18,7 +18,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        {mock.blocks.map(item => (
+        {mock.blocks.map((item) => (
           <ListBlock block={item} key={item.id} />
         ))}
       </div>

package/src/ListBlock/ListBlock.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { ListBlock } from './'
 import { ListBlockProps } from './ListBlock.types'
+
 import styles from './ListBlock.module.css'
 
 describe('List Block', () => {

package/src/ListBlock/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { ListBlockProps } from './ListBlock.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
 
 import styles from './ListBlock.module.css'
@@ -12,7 +11,7 @@ export const ListBlock: React.FC<ListBlockProps> = ({
 }) => {
   const TagName = type
 
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true],
     [styles[type], !!type && !!styles[type]]

package/src/MaterialNote/MaterialNote.stories.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-
 import { MaterialNote } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import { MaterialNoteProps } from 'src/MaterialNote/MaterialNote.types'
+
 import styles from './MaterialNote.stories.module.css'
 
-import mock from './mock'
+import mock from './mock.json'
 
 export default {
   title: 'Main / MaterialNote',
@@ -18,7 +19,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <MaterialNote block={mock} />
+        <MaterialNote block={mock as MaterialNoteProps['block']} />
       </div>
     </>
   )

package/src/MaterialNote/MaterialNote.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { MaterialNote } from './'
 import { MaterialNoteProps } from './MaterialNote.types'
+
 import styles from './MaterialNote.module.css'
 
 describe('Material Note', () => {

package/src/MaterialNote/MaterialNote.types.ts

@@ -3,10 +3,11 @@ export interface MaterialNoteProps {
     data: {
       data: string
       id: string
-      lenght: number
+      length: number
       type: 'note_caption' | 'note_credit'
     }[]
     id: string
+    type: string
   }
   styleContext?: string | string[]
 }

package/src/MaterialNote/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MaterialNoteProps } from './MaterialNote.types'
 import makeStyleContext from '../utils/makeStyleContext'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import styles from './MaterialNote.module.css'
 
@@ -9,7 +9,7 @@ export const MaterialNote: React.FC<MaterialNoteProps> = ({
   block: { data },
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [[styles.root, true]]
+  let classNames: ClassNames = [[styles.root, true]]
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles)
@@ -18,7 +18,7 @@ export const MaterialNote: React.FC<MaterialNoteProps> = ({
   return (
     <div data-testid="material-note" className={makeClassName(classNames)}>
       {data &&
-        data.map(item => (
+        data.map((item) => (
           <p
             className={styles[item.type]}
             key={item.id}

package/src/MaterialTitle/MaterialTitle.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { MaterialTitle, Primary, Secondary } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './MaterialTitle.stories.module.css'
 
 export default {

package/src/MaterialTitle/MaterialTitle.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { MaterialTitle } from './'
 import { MaterialTitleProps } from './MaterialTitle.types'
+
 import styles from './MaterialTitle.module.css'
 
 describe('Material Title', () => {

package/src/MediaCaption/MediaCaption.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { MediaCaption } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './MediaCaption.stories.module.css'
 
 export default {

package/src/MediaCaption/MediaCaption.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { MediaCaption } from './'
 import { MediaCaptionProps } from './MediaCaption.types'
+
 import styles from './MediaCaption.module.css'
 
 describe('Media Caption', () => {

package/src/MediaCaption/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MediaCaptionProps } from './MediaCaption.types'
 import makeStyleContext from '../utils/makeStyleContext'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import styles from './MediaCaption.module.css'
 
@@ -10,7 +10,7 @@ export const MediaCaption: React.FC<MediaCaptionProps> = ({
   caption,
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [[styles.root, true]]
+  let classNames: ClassNames = [[styles.root, true]]
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles)

package/src/Meta/Meta.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import { Meta } from './'
 import { MetaItem } from '../MetaItem'
 import { MetaItemLive } from '../MetaItemLive'
@@ -7,6 +6,7 @@ import { DocumentItemsCount } from '../DocumentItemsCount'
 import { Timestamp } from '../Timestamp'
 import { SvgSymbol } from '../SvgSymbol'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './Meta.stories.module.css'
 
 export default {

package/src/Meta/Meta.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { Meta } from './'
 import { MetaProps } from './Meta.types'
+
 import styles from './Meta.module.css'
 
 describe('Meta', () => {

package/src/Meta/MetaContainer.tsx

@@ -1,11 +1,9 @@
 import React from 'react'
 import { MetaContainerProps } from './Meta.types'
-
 import { Meta } from './'
 import { MetaItem } from '../MetaItem'
 import { MetaItemLive } from '../MetaItemLive'
 import { DocumentItemsCount } from '../DocumentItemsCount'
-
 import { BookmarkButton } from '../BookmarkButton'
 import { Timestamp } from '../Timestamp'
 import { SvgSymbol } from '../SvgSymbol'
@@ -29,7 +27,7 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
   const isPodcast = styleContext && styleContext.indexOf('podcast') !== -1
   const isSlides = styleContext && styleContext.indexOf('slide') !== -1
 
-  const hasSource = !!components.find(item => item.type === 'source_name')
+  const hasSource = !!components.find((item) => item.type === 'source_name')
 
   return (
     <Meta
@@ -38,7 +36,7 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
       onlyOn={block.only_on}
       hasSource={hasSource}
     >
-      {components.map(component => {
+      {components.map((component) => {
         switch (component.type) {
           case 'source_name': {
             return (

package/src/Meta/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { MetaProps } from './Meta.types'
-
 import makeStyleContext from '../utils/makeStyleContext'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import styles from './Meta.module.css'
 
@@ -13,7 +12,7 @@ export const Meta: React.FC<MetaProps> = ({
   onlyOn,
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[theme], !!theme && !!styles[theme]],
     [styles[onlyOn], !!onlyOn],

package/src/MetaItem/MetaItem.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { MetaItem } from './'
-import { PreviewWrapper } from '_storybook/PreviewWrapper'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './MetaItem.stories.module.css'
 
 export default {

package/src/MetaItem/MetaItem.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { MetaItem } from './'
 import { MetaItemProps } from './MetaItem.types'
+
 import styles from './MetaItem.module.css'
 
 describe('Meta Item', () => {

package/src/MetaItem/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import { MetaItemProps } from './MetaItem.types'
-
-import makeClassName from '../utils/makeClassName'
-
+import { makeClassName } from '../utils/makeClassName'
 import styles from './MetaItem.module.css'
 
 export const MetaItem: React.FC<MetaItemProps> = ({