@meduza/ui-kit-2 0.1.8 → 0.1.10

package/src/MetaItemLive/MetaItemLive.stories.tsx

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

package/src/MetaItemLive/MetaItemLive.test.tsx

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

package/src/MetaItemLive/index.tsx

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

package/src/Popover/Popover.module.css

@@ -13,11 +13,14 @@
   width: 100%;
   height: 100%;
   min-height: 120px;
-  padding: 10px 10px 0;
+  padding: 10px 0 0;
 
   animation: fadeOut 250ms ease both 100ms;
 
   opacity: 1;
+
+  font-size: 16px;
+  line-height: 22px;
 }
 
 .root.visible {
@@ -44,7 +47,7 @@
   max-width: 420px;
   min-height: 80px;
   margin: 0 auto;
-  padding: 15px 20px 40px;
+  padding: 22px 20px 28px;
 
   animation: disappear 350ms ease both;
 }
@@ -97,6 +100,37 @@
   animation: appear 350ms ease both;
 }
 
+.body {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.body h3 {
+  margin: 0 0 5px;
+
+  font-size: inherit;
+  font-weight: 600;
+  line-height: inherit;
+}
+
+.body p {
+  margin: 0;
+}
+
+.body p + p {
+  margin-top: 6px;
+}
+
+.body a {
+  color: inherit;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.body a:hover {
+  color: $gold;
+}
+
 @keyframes appear {
   0% {
     transform: translateY(100%);

package/src/Popover/Popover.stories.tsx

@@ -1,8 +1,8 @@
 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 {

package/src/Popover/Popover.test.tsx

@@ -1,8 +1,8 @@
 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', () => {

package/src/Popover/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { PopoverProps } from './Popover.types'
-import makeClassName from '../utils/makeClassName'
-
+import { makeClassName } from '../utils/makeClassName'
 import styles from './Popover.module.css'
 
 export const Popover: React.FC<PopoverProps> = ({ children, onClose }) => {
@@ -71,7 +70,7 @@ export const Popover: React.FC<PopoverProps> = ({ children, onClose }) => {
             height="100%"
           />
         </svg>
-        {children}
+        <div className={styles.body}>{children}</div>
       </div>
     </div>
   )

package/src/QuoteBlock/QuoteBlock.stories.tsx

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

package/src/QuoteBlock/QuoteBlock.test.tsx

@@ -1,8 +1,8 @@
 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', () => {

package/src/QuoteBlock/index.tsx

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

package/src/RawHtmlBlock/RawHtmlBlock.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { RawHtmlBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './RawHtmlBlock.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) => (
           <RawHtmlBlock block={item} key={item.id} lightBox={null} />
         ))}
       </div>

package/src/RawHtmlBlock/RawHtmlBlock.test.tsx

@@ -1,8 +1,8 @@
 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', () => {

package/src/RawHtmlBlock/index.tsx

@@ -1,12 +1,10 @@
 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> = ({

package/src/RelatedBlock/RelatedBlock.stories.tsx

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

package/src/RelatedBlock/RelatedBlock.test.tsx

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

package/src/RelatedBlock/index.tsx

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

package/src/RenderBlocks/RenderBlocks.stories.tsx

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

package/src/RenderBlocks/RenderBlocks.test.tsx

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

package/src/RenderBlocks/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { RenderBlocksProps } from './RenderBlocks.types'
-
 import { Tag } from '../Tag'
 import { SimpleTitle } from '../SimpleTitle'
 import { RichTitle } from '../RichTitle'

package/src/RichTitle/RichTitle.stories.tsx

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

package/src/RichTitle/RichTitle.test.tsx

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

package/src/RichTitle/index.tsx

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

package/src/SimpleBlock/FootnoteLink.css

@@ -32,3 +32,10 @@ span[data-body]:hover {
   background-color: #5B5B5B;
   box-shadow: inset 1px 0 #747474, inset 0 1px #747474, inset -1px 0 #747474, inset 0 -1px #747474;
 }
+
+span[data-highlight='true'],
+span[data-highlight='true']:hover {
+  background-color: #f4efe9;
+  box-shadow: inset 1px 0 #b88b58, inset 0 1px #b88b58, inset -1px 0 #b88b58,
+    inset 0 -1px #b88b58;
+}

package/src/SimpleBlock/SimpleBlock.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { SimpleBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './SimpleBlock.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) => (
           <SimpleBlock
             block={item}
             key={item.id}

package/src/SimpleBlock/SimpleBlock.test.tsx

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

package/src/SimpleBlock/index.tsx

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

package/src/SimpleTitle/SimpleTitle.stories.tsx

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

package/src/SimpleTitle/SimpleTitle.test.tsx

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

package/src/SimpleTitle/index.tsx

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

package/src/SourceBlock/SourceBlock.stories.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
-
 import { SourceBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './SourceBlock.stories.module.css'
 
+import mock from './mock.json'
+
 export default {
   title: 'Main / SourceBlock',
   component: SourceBlock,
@@ -14,11 +16,9 @@ export default {
 
 const Example: React.FC = () => {
   return (
-    <>
-      <div className={styles.root}>
-        <SourceBlock />
-      </div>
-    </>
+    <div className={styles.root}>
+      <SourceBlock block={mock} />
+    </div>
   )
 }
 

package/src/SourceBlock/SourceBlock.test.tsx

@@ -1,8 +1,8 @@
 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', () => {

package/src/SourceBlock/index.tsx

@@ -1,16 +1,18 @@
 import React from 'react'
 import { SourceBlockProps } from './SourceBlock.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
 
 import styles from './SourceBlock.module.css'
 
 export const SourceBlock: React.FC<SourceBlockProps> = ({
-  block: { only_on: onlyOn, quote, origin, url },
+  block: {
+    only_on: onlyOn,
+    data: { quote, origin, url }
+  },
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true]
   ]

package/src/SourceBlock/mock.json

@@ -0,0 +1,15 @@
+{
+  "type": "source",
+  "data": {
+    "quote": [
+      {
+        "type": "p",
+        "data": "«В свое время, в 1990-е, потребительская корзина позиционировалась как временная, кризисная мера. Полагали, что мы через короткое время сможем отказаться от этого подхода и перейти к определению бедности через медианные доходы граждан. Но мы прожили с этой временной мерой почти четверть века», — отмечает глава НИИ труда Дмитрий Платыгин.",
+        "length": 339
+      }
+    ],
+    "origin": "Коммерсант",
+    "url": "https://www.kommersant.ru/doc/4502584?from=main_1"
+  },
+  "id": "4-072f3b4143d3377d533e198d3ea1ac263959a79a114e81104ecb4ab02b3996e5"
+}

package/src/Spoiler/Spoiler.stories.tsx

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

package/src/Spoiler/Spoiler.test.tsx

@@ -1,8 +1,8 @@
 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', () => {

package/src/Spoiler/index.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useRef } from 'react'
 import { SpoilerProps } from './Spoiler.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-import postMessage from '../utils/postMessage'
 
+import postMessage from '../utils/postMessage'
 import { RenderBlocks } from '../RenderBlocks'
 import { Button } from '../Button'
 import { SvgSymbol } from '../SvgSymbol'
@@ -39,7 +38,7 @@ export const Spoiler: React.FC<SpoilerProps> = ({
     }
   }
 
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], !!onlyOn],
     [styles[display], !!display && styles[display]],
@@ -57,7 +56,7 @@ export const Spoiler: React.FC<SpoilerProps> = ({
     <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 => (
+        {blocks.map((item) => (
           <RenderBlocks
             key={item.id}
             block={item}

package/src/SvgSymbol/SvgSymbol.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-
 import { SvgSymbol } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
-import styles from './SvgSymbol.stories.module.css'
 import { Icons } from './SvgSymbol.types'
 
+import styles from './SvgSymbol.stories.module.css'
+
 export default {
   title: 'Main / SvgSymbol',
   component: SvgSymbol,
@@ -46,7 +46,7 @@ const Example: React.FC = () => {
     <div className={styles.root}>
       <h2>Кнопки соц. сетей и реакций</h2>
       <div className={styles.row}>
-        {social.map(icon => (
+        {social.map((icon) => (
           <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
             <SvgSymbol icon={icon} size="medium" />
           </span>
@@ -55,7 +55,7 @@ const Example: React.FC = () => {
 
       <h2>Мета</h2>
       <div className={styles.row}>
-        {meta.map(icon => (
+        {meta.map((icon) => (
           <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
             <SvgSymbol icon={icon} size="medium" />
           </span>
@@ -64,7 +64,7 @@ const Example: React.FC = () => {
 
       <h2>Плеер</h2>
       <div className={styles.row}>
-        {podcast.map(icon => (
+        {podcast.map((icon) => (
           <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
             <SvgSymbol icon={icon} size="medium" />
           </span>
@@ -73,7 +73,7 @@ const Example: React.FC = () => {
 
       <h2>Другие</h2>
       <div className={styles.row}>
-        {other.map(icon => (
+        {other.map((icon) => (
           <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
             <SvgSymbol icon={icon} size="medium" />
           </span>

package/src/SvgSymbol/SvgSymbol.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render, RenderResult } from '@testing-library/react'
-
 import { SvgSymbol } from './'
 import { SvgSymbolProps } from './SvgSymbol.types'
+
 import styles from './SvgSymbol.module.css'
 
 describe('Svg Symbol', () => {

package/src/SvgSymbol/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { SvgSymbolProps } from './SvgSymbol.types'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName } from '../utils/makeClassName'
+import { icons } from './icons'
 
 import styles from './SvgSymbol.module.css'
-import { icons } from './icons'
 
 export const SvgSymbol: React.FC<SvgSymbolProps> = ({
   icon,