@meduza/ui-kit-2 0.1.8 → 0.1.10

package/dist/utils/makeClassName.d.ts

@@ -1,2 +1,3 @@
-declare const makeClassName: (list: (string[] | string | boolean)[][]) => string;
+export declare type ClassNames = (string[] | string | boolean)[][];
+export declare const makeClassName: (list: ClassNames) => string;
 export default makeClassName;

package/dist/utils/makeStyleContext.d.ts

@@ -1,2 +1,3 @@
-declare const makeStyleContext: (classNames: (string[] | string | boolean)[][], styleContext: string[] | string, styles: any) => (string[] | string | boolean)[][];
+import { ClassNames } from './makeClassName';
+declare const makeStyleContext: (classNames: ClassNames, styleContext: string[] | string, styles: Record<string, string>) => ClassNames;
 export default makeStyleContext;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.8",
+  "version": "0.1.10",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -22,7 +22,7 @@
     "test": "tsdx test --passWithNoTests",
     "test:watch": "tsdx test --watch",
     "test:coverage": "tsdx test --coverage",
-    "lint": "tsdx lint",
+    "lint": "eslint src",
     "prepare": "tsdx build",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -51,7 +51,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged",
+      "pre-commit": "tsc --noEmit && lint-staged",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
@@ -69,7 +69,14 @@
     "@testing-library/react": "^10.4.7",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^4.2.0",
+    "@typescript-eslint/parser": "^4.2.0",
     "babel-loader": "^8.1.0",
+    "eslint": "^7.9.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.0",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
     "lint-staged": "^10.2.11",
@@ -79,6 +86,7 @@
     "postcss-modules": "^3.2.0",
     "postcss-preset-env": "^6.7.0",
     "precss": "^4.0.0",
+    "prettier": "^2.1.2",
     "react": "^16.13.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.13.1",
@@ -93,7 +101,7 @@
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tsdx": "^0.13.2",
     "tslib": "^2.0.0",
-    "typescript": "^3.9.6",
+    "typescript": "^4.0.3",
     "typescript-plugin-css-modules": "^2.4.0",
     "utils": "^0.3.1"
   },

package/src/BookmarkButton/BookmarkButton.stories.tsx

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

package/src/BookmarkButton/index.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import { BookmarkButtonProps } from './BookmarkButton.types'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-
 import { SvgSymbol } from '../SvgSymbol'
-
 import styles from './BookmarkButton.module.css'
 
 export const BookmarkButton: React.FC<BookmarkButtonProps> = ({
@@ -13,7 +11,7 @@ export const BookmarkButton: React.FC<BookmarkButtonProps> = ({
   isInBookmarks,
   onClick
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles.isInBookmarks, isInBookmarks],
     [styles[theme], !!theme && !!styles[theme]]

package/src/Button/Button.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
-
 import { Button } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
-import styles from './Button.stories.module.css'
 import { ButtonStates, ButtonThemes } from './Button.types'
 
+import styles from './Button.stories.module.css'
+
 export default {
   title: 'Main / Button',
   component: Button,

package/src/Button/Button.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { render, RenderResult } from '@testing-library/react'
-
 import { Button } from './'
-import styles from './Button.module.css'
 import { ButtonThemes } from './Button.types'
 
+import styles from './Button.module.css'
+
 describe('Button', () => {
   const buttonTypes: { theme: ButtonThemes; title: string }[] = [
     { theme: 'gold', title: 'Золотая кнопка' },
@@ -16,7 +16,7 @@ describe('Button', () => {
     { theme: 'gray', title: 'Серая кнопка' }
   ]
 
-  test.each(buttonTypes)('Check classes.', button => {
+  test.each(buttonTypes)('Check classes.', (button) => {
     const renderComponent = (): RenderResult =>
       render(<Button theme={button.theme}>{button.title}</Button>)
 

package/src/Button/index.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName } from '../utils/makeClassName'
 import Loader from './loader'
-import styles from './Button.module.css'
 import { ButtonProps } from './Button.types'
 
+import styles from './Button.module.css'
+
 export const Button: FC<ButtonProps> = ({
   theme = 'gold',
   size = 'default',

package/src/CardTitle/CardTitle.stories.tsx

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

package/src/CardTitle/CardTitle.test.tsx

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

package/src/CardTitle/index.tsx

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

package/src/ChapterBlock/ChapterBlock.stories.tsx

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

package/src/ChapterBlock/ChapterBlock.test.tsx

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

package/src/ChapterBlock/index.tsx

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

package/src/Cover/Cover.stories.tsx

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

package/src/Cover/Cover.test.tsx

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

package/src/Cover/index.tsx

@@ -1,16 +1,15 @@
 import React, { useState } from 'react'
 import { CoverProps } from './Cover.types'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
 import generateGradient from '../utils/generateGradient'
-
-import styles from './Cover.module.css'
-
 import { RenderBlocks } from '../RenderBlocks'
 import { MediaCaption } from '../MediaCaption'
 import { Image } from '../Image'
 import { Popover } from '../Popover'
 
+import styles from './Cover.module.css'
+
 export const Cover: React.FC<CoverProps> = ({
   block: {
     only_on: onlyOn,
@@ -25,7 +24,7 @@ export const Cover: React.FC<CoverProps> = ({
 
   const style: React.CSSProperties = {}
 
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], !!onlyOn && !!styles[onlyOn]]
   ]
@@ -56,7 +55,7 @@ export const Cover: React.FC<CoverProps> = ({
         <Image optimized={urls} ratio={mobileRatio} display="narrow" />
       </div>
       <div className={styles.body} style={style}>
-        {blocks.map(item => (
+        {blocks.map((item) => (
           <RenderBlocks
             key={item.id}
             block={item}

package/src/DocumentItemsCount/DocumentItemsCount.stories.tsx

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

package/src/DocumentItemsCount/DocumentItemsCount.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { DocumentItemsCount } from './'
 import { DocumentItemsCountProps } from './DocumentItemsCount.types'
+
 import styles from './DocumentItemsCount.module.css'
 
 describe('Document Items Count', () => {

package/src/DocumentItemsCount/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { DocumentItemsCountProps } from './DocumentItemsCount.types'
-
 import pluralize from '../utils/pluralize'
 
 import styles from './DocumentItemsCount.module.css'

package/src/DotsOnImage/DotsOnImage.module.css

@@ -39,23 +39,27 @@
   top: 50%;
   left: 50%;
 
-  width: 340px;
-  padding: 25px;
-
   transform: translate(-50%, -50%);
+}
+
+.popoverTitle {
+  margin-bottom: 16px;
 
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
+  font-weight: 600;
+}
 
+.popoverBody {
   font-family: $secondaryFont;
   font-size: 16px;
   line-height: 22px;
 }
 
-.popoverTitle {
-  font-weight: 600;
+.popoverText p {
+  margin: 0;
+}
+
+.popoverText a:hover {
+  color: $gold;
 }
 
 .dismiss {

package/src/DotsOnImage/DotsOnImage.stories.tsx

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

package/src/DotsOnImage/DotsOnImage.test.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import mock from './mock.json'
 import { DotsOnImage } from './'
+
 import styles from './DotsOnImage.module.css'
 
 describe('Dots On Image', () => {
@@ -10,7 +11,7 @@ describe('Dots On Image', () => {
   const renderComponent = () => render(<DotsOnImage block={data} />)
 
   it('should have root style', () => {
-    const { getByTestId } = renderComponent()
+  const { getByTestId } = renderComponent()
 
     const dotsOnImage = getByTestId('dots-on-image')
 

package/src/DotsOnImage/index.tsx

@@ -1,8 +1,11 @@
 import React, { useState } from 'react'
 import { PopoverData, DotsOnImageProps, SingleDot } from './DotsOnImage.types'
-
 import { Image } from '../Image'
-import { SvgSymbol } from '../SvgSymbol'
+import { Popover } from '../Popover'
+import { Footnote } from '../Footnote'
+
+import viewportSize from '../utils/viewportSize'
+import { MediaQuerySizes } from '../constants'
 
 import styles from './DotsOnImage.module.css'
 
@@ -30,7 +33,7 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
   return (
     <div data-testid="dots-on-image" className={styles.root}>
       <div className={styles.dots}>
-        {dots.map(dot => (
+        {dots.map((dot) => (
           <button
             className={styles.dot}
             type="button"
@@ -63,20 +66,29 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
       </div>
 
       {popover.show && (
-        <div className={styles.popover}>
-          <button
-            className={styles.dismiss}
-            type="button"
-            onClick={(): void => setPopover({ show: false })}
-          >
-            <SvgSymbol icon="cross" size="unset" />
-          </button>
-          <div className={styles.popoverTitle}>{popover.title}</div>
-          <div
-            className={styles.popoverBody}
-            dangerouslySetInnerHTML={{ __html: popover.body }}
-          />
-        </div>
+        <>
+          {viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? (
+            <div className={styles.popover}>
+              <Footnote
+                onClose={(): void => {
+                  setPopover({ show: false })
+                }}
+              >
+                <h3>{popover.title}</h3>
+                <div dangerouslySetInnerHTML={{ __html: popover.body }} />
+              </Footnote>
+            </div>
+          ) : (
+            <Popover
+              onClose={(): void => {
+                setPopover({ show: false })
+              }}
+            >
+              <h3>{popover.title}</h3>
+              <div dangerouslySetInnerHTML={{ __html: popover.body }} />
+            </Popover>
+          )}
+        </>
       )}
     </div>
   )

package/src/DotsOnImage/mock.json

@@ -3,8 +3,8 @@
   "data": {
     "dots": [
       {
-        "title": "заг 1ой точки",
-        "body": "<p>тест на <strong>точке</strong></p>",
+        "title": "Мафия и Голливуд",
+        "body": "<p>Но Голливуду тех лет далеко за вдохновением ходить было не нужно. Мафия в 20-е подминала под себя профсоюзы по всей стране, и Голливуд не был исключением. Один из таких профсоюзов возглавил Томас Мэлой. Когда в 1931 году уволенный киномеханик пришёл к нему жаловаться, то подручный Мэлоя застрелил его прямо в кабинете. Причём без всяких последствий для себя.</p>",
         "position": {
           "x": 43.86,
           "y": 31.03
@@ -17,8 +17,8 @@
         "id": "0-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
       },
       {
-        "title": "2222",
-        "body": "<p>sdsd</p>",
+        "title": "Аль Капоне в кино",
+        "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
         "position": {
           "x": 16.05,
           "y": 18.83

package/src/Dropdown/index.tsx

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

package/src/EmbedBlock/EmbedBlock.module.css

@@ -183,7 +183,7 @@
   }
 }
 
-.mobile .figure {
+.mobile:first-child .figure {
   overflow: hidden;
 
   border-radius: 8px 8px 0 0;

package/src/EmbedBlock/EmbedBlock.stories.tsx

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

package/src/EmbedBlock/EmbedBlock.test.tsx

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

package/src/EmbedBlock/EmbedBlock.tsx

@@ -1,17 +1,12 @@
 import React, { useState } from 'react'
-
 import { Image } from '../Image'
 import { Popover } from '../Popover'
 import { MediaCaption } from '../MediaCaption'
 import { DotsOnImage } from '../DotsOnImage'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-
 import DangerousHTML from '../utils/DangerousHtml'
-
 import { EmbedGif } from './EmbedGif'
-
 import { EmbedBlockProps } from './EmbedBlock.types'
 
 import styles from './EmbedBlock.module.css'
@@ -118,7 +113,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
     style.height = 0
   }
 
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles.cc, cc],
     [styles[display], !!display && styles[display]],
@@ -134,7 +129,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
 
   if (styleContext) {
     const filteredContext = Object.keys(styleContext)
-      .filter(key => key.startsWith('isIn') && styles[key])
+      .filter((key) => key.startsWith('isIn') && styles[key])
       .reduce((acc, key) => {
         acc.push([styles[key], true])
 

package/src/EmbedBlock/EmbedGif.tsx

@@ -1,10 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
-
 import enableInlineVideo from 'iphone-inline-video'
-
 import viewportSize from '../utils/viewportSize'
 import { MediaQuerySizes } from '../constants'
-
 import { EmbedGifProps } from './EmbedBlock.types'
 
 import styles from './EmbedBlock.module.css'

package/src/EmbedBlock/IframeBlock.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react'
 import { EmbedBlockProps } from './EmbedBlock.types'
-
 import { EmbedBlock } from './EmbedBlock'
 
 export const IframeBlock: React.FC<EmbedBlockProps> = ({

package/src/EmbedBlock/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { EmbedBlockProps } from './EmbedBlock.types'
-
 import { EmbedBlock } from './EmbedBlock'
 import { IframeBlock } from './IframeBlock'
 

package/src/Footnote/Footnote.module.css

@@ -0,0 +1,70 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  width: 320px;
+  padding: 20px;
+
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
+}
+
+.body {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.body h3 {
+  margin: 0 0 16px;
+
+  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;
+}
+
+.dismiss {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  margin: 0;
+  padding: 6px 9px 10px;
+
+  cursor: pointer;
+
+  color: #b3b3b3;
+  border-width: 0;
+  outline: none;
+  background-color: transparent;
+}
+
+.dismiss:hover {
+  color: #757575;
+}
+
+.dismiss svg {
+  width: 12px;
+  height: 12px;
+}
+

package/src/Footnote/Footnote.stories.module.css

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