@meduza/ui-kit-2 0.4.4 → 0.4.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.4",
+  "version": "0.4.5",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/DocumentItemsCount/DocumentItemsCount.module.css

@@ -1,17 +1,6 @@
-/* stylelint-disable declaration-empty-line-before */
 @import '../vars';
 
-.root {
-  display: inline;
-
-  line-height: inherit;
-}
-
-.root svg {
-  vertical-align: top;
-}
-
-.items {
+.root:not(:first-child) {
   margin-left: 1px;
 
   vertical-align: top;

package/src/DocumentItemsCount/DocumentItemsCount.test.tsx

@@ -1,21 +1,14 @@
 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', () => {
-  // let props: DocumentItemsCountProps
-
   const renderComponent = () =>
     render(<DocumentItemsCount type="card" items={4} />)
 
   it('should have root style', () => {
-    const { getByTestId } = renderComponent()
-
-    const documentItemsCount = getByTestId('document-items-count')
+    const { container } = renderComponent()
 
-    expect(documentItemsCount).toHaveClass(styles.root)
+    expect(container).toBeInTheDocument
   })
 })

package/src/DocumentItemsCount/index.tsx

@@ -45,9 +45,9 @@ export const DocumentItemsCount: React.FC<DocumentItemsCountProps> = ({
   )}`
 
   return (
-    <div data-testid="document-items-count" className={styles.root}>
+    <>
       {children}
-      <span className={styles.items}>{itemsCount}</span>
-    </div>
+      <span className={styles.root}>{itemsCount}</span>
+    </>
   )
 }

package/src/RawHtmlBlock/index.tsx

@@ -6,7 +6,6 @@ import { Spoiler } from '../Spoiler'
 import { HalfBlock } from '../HalfBlock'
 import { Cover } from '../Cover'
 import { RelatedRichBlock } from '../RelatedRichBlock'
-import { ShopRelatedBlock } from '../ShopRelatedBlock'
 import { BlockProvider } from '../utils/BlockContext'
 
 export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
@@ -48,10 +47,6 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
       return <RelatedRichBlock block={block} styleContext={styleContext} />
     }
 
-    case 'related_shop': {
-      return <ShopRelatedBlock block={block} styleContext={styleContext} />
-    }
-
     default: {
       return (
         <BlockProvider value={context}>

package/src/index.tsx

@@ -40,7 +40,6 @@ export * from './Footnote'
 export * from './RelatedRichBlock'
 export * from './SensitiveBlock'
 export * from './DonatesTeaser'
-export * from './ShopRelatedBlock'
 export * from './AnnouncementInText'
 export * from './Tooltip'
 // /* PLOP_INJECT_LINK */ //

package/src/ShopRelatedBlock/ShopRelatedBlock.module.css

@@ -1,210 +0,0 @@
-@import '../vars.css';
-
-.root {
-  position: relative;
-  z-index: 10;
-
-  display: block;
-  overflow: hidden;
-
-  color: #000;
-
-  text-decoration: none;
-
-  border-radius: 8px;
-  outline-width: 0;
-
-  @media $mobile {
-    color: #fff;
-  }
-}
-
-.root:hover {
-  @media $mobile {
-    opacity: 0.95;
-  }
-}
-
-.root::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 20;
-
-  border-radius: 8px;
-
-  content: '';
-}
-
-.root::before {
-  display: block;
-
-  width: 100%;
-}
-
-.root::after {
-  box-shadow: inset 0 4px #b88b59, inset 0 5px rgba(0, 0, 0, 0.2),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
-
-.root,
-.wrapper {
-  margin: 16px 0;
-
-  @media $portraitTablet {
-    margin: 25px 0;
-  }
-}
-
-.overlay,
-.overlayHeader {
-  position: absolute;
-  right: 0;
-  left: 0;
-  z-index: 10;
-}
-
-.overlay {
-  bottom: 0;
-
-  height: 295px;
-}
-
-.overlayHeader {
-  top: 0;
-
-  height: 150px;
-}
-
-.body {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-end;
-
-  padding: 12px 15px;
-
-  background-color: #f7f7f7;
-
-  @media $mobile {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
-
-    min-height: 295px;
-    padding: 20px;
-
-    background-color: transparent;
-  }
-}
-
-.hasGradient .body {
-  @media $mobile {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
-
-    min-height: 295px;
-
-    background-color: transparent;
-  }
-}
-
-.picture {
-  position: relative;
-}
-
-.picture::after {
-  position: absolute;
-  right: 1px;
-  bottom: 0;
-  left: 1px;
-  z-index: 10;
-
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-
-  content: '';
-
-  @media $mobile {
-    content: '';
-  }
-}
-
-.tag {
-  position: absolute;
-  top: 14px;
-  right: 15px;
-  left: 15px;
-  z-index: 10;
-
-  color: rgba(255, 255, 255, 0.7);
-
-  font-size: 12px;
-
-  @media $landscapeTablet {
-    top: 16px;
-    right: 20px;
-    left: 20px;
-  }
-}
-
-.center {
-  width: 100%;
-  max-width: 650px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.title {
-  font-weight: 700;
-  font-size: 19px;
-  font-family: $secondaryFont;
-  line-height: 23px;
-
-  @media $landscapeTablet {
-    font-size: 1.3rem;
-    line-height: 1.6rem;
-  }
-}
-
-.price {
-  display: block;
-}
-
-/* Themes */
-
-.dark {
-  color: #000;
-}
-
-.dark .tag {
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.light {
-  @media $mobile {
-    color: #fff;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-  }
-}
-
-/* Display */
-
-.mobile {
-  @media $mobile {
-    display: none;
-  }
-}
-
-.desktop {
-  display: none;
-
-  @media $mobile {
-    display: block;
-  }
-}

package/src/ShopRelatedBlock/ShopRelatedBlock.stories.module.css

@@ -1,12 +0,0 @@
-@import '../vars.css';
-
-.root {
-  display: block;
-
-  max-width: 650px;
-  margin: 0 auto;
-}
-
-.card + .card {
-  margin-top: 40px;
-}

package/src/ShopRelatedBlock/ShopRelatedBlock.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { ShopRelatedBlock } from '.'
-import { PreviewWrapper } from '../_storybook/PreviewWrapper'
-
-import styles from './ShopRelatedBlock.stories.module.css'
-import mock from './mock.json'
-
-export default {
-  title: 'Main / ShopRelatedBlock',
-  component: ShopRelatedBlock,
-  parameters: {
-    themeWrapperSideBySide: true
-  }
-}
-
-const Example: React.FC = () => {
-  return (
-    <>
-      <div className={styles.root}>
-        <div className={styles.card}>
-          <ShopRelatedBlock block={mock.rich} styleContext={['no_mods']} />
-        </div>
-        <div className={styles.card}>
-          <ShopRelatedBlock block={mock.rich_dark} styleContext={['no_mods']} />
-        </div>
-        <div className={styles.card}>
-          <ShopRelatedBlock
-            block={mock.rich_and_featured_mobile}
-            styleContext={['no_mods']}
-          />
-        </div>
-        <div className={styles.card}>
-          <ShopRelatedBlock
-            block={mock.rich_and_featured_desktop}
-            styleContext={['no_mods']}
-          />
-        </div>
-      </div>
-    </>
-  )
-}
-
-export const Default: React.FC = () => (
-  <>
-    <PreviewWrapper theme="light">
-      <Example />
-    </PreviewWrapper>
-    {/* <PreviewWrapper theme="dark">
-      <Example />
-    </PreviewWrapper> */}
-  </>
-)

package/src/ShopRelatedBlock/ShopRelatedBlock.test.tsx

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

package/src/ShopRelatedBlock/ShopRelatedBlock.types.ts

@@ -1,4 +0,0 @@
-export interface ShopRelatedBlockProps {
-  block?: any
-  styleContext?: any
-}

package/src/ShopRelatedBlock/index.tsx

@@ -1,120 +0,0 @@
-/* eslint-disable react/jsx-no-target-blank */
-import React, { useEffect } from 'react'
-
-import { useInView } from 'react-intersection-observer'
-import { ShopRelatedBlockProps } from './ShopRelatedBlock.types'
-
-import postMessage from '../utils/postMessage'
-import { makeClassName, ClassNames } from '../utils/makeClassName'
-import makeStyleContext from '../utils/makeStyleContext'
-import generateGradient from '../utils/generateGradient'
-
-import { Tag } from '../Tag'
-import { Image } from '../Image'
-
-import styles from './ShopRelatedBlock.module.css'
-
-export const ShopRelatedBlock: React.FC<ShopRelatedBlockProps> = ({
-  block: {
-    only_on: onlyOn,
-    data: {
-      url,
-      cover: {
-        urls,
-        gradients,
-        tag,
-        layout,
-        ratio,
-        first_title: firstTitle,
-        second_title: secondTitle
-      }
-    }
-  },
-  styleContext
-}) => {
-  const style: React.CSSProperties = {}
-  const styleHeader: React.CSSProperties = {}
-
-  const [ref, inView] = useInView({
-    threshold: 0,
-    triggerOnce: true
-  })
-
-  useEffect(() => {
-    if (inView) {
-      if (
-        (onlyOn === 'mobile' && window.innerWidth <= 511) ||
-        (onlyOn === 'desktop' && window.innerWidth >= 512) ||
-        !onlyOn
-      ) {
-        postMessage('productRelated', url, 'view')
-      }
-    }
-  }, [inView])
-
-  const handleClick = () => {
-    postMessage('productRelated', url, 'click')
-  }
-
-  let classNames: ClassNames = [
-    [styles.root, true],
-    [styles.hasGradient, !!gradients],
-    [styles[onlyOn], !!onlyOn && !!styles[onlyOn]]
-  ]
-
-  if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles)
-  }
-
-  if (gradients) {
-    styleHeader.backgroundImage = generateGradient(
-      gradients.bg_rgb,
-      'mediaBlockTop'
-    )
-
-    const theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light']
-    classNames = makeStyleContext(classNames, theme, styles)
-
-    if (onlyOn === 'desktop') {
-      style.backgroundImage = generateGradient(
-        gradients.bg_rgb,
-        'mediaBlockBottom'
-      )
-    }
-  }
-
-  return (
-    <a
-      data-testid="related-rich-block"
-      className={makeClassName(classNames)}
-      href={url}
-      target="_blank"
-      onClick={(): void => handleClick()}
-      ref={ref}
-    >
-      {layout === 'rich' && (
-        <>
-          <div className={styles.overlay} style={style} />
-          <div className={styles.overlayHeader} style={styleHeader} />
-        </>
-      )}
-
-      <div className={styles.tag}>
-        <Tag size="small" theme="inherit" styleContext="richRelated">
-          {tag}
-        </Tag>
-      </div>
-      <div className={styles.cover}>
-        <div className={styles.picture}>
-          <Image optimized={urls} ratio={ratio} display="narrow" />
-        </div>
-      </div>
-      <div className={styles.body}>
-        <h2 className={styles.title}>
-          {firstTitle}
-          <span className={styles.price}>{secondTitle}</span>
-        </h2>
-      </div>
-    </a>
-  )
-}

package/src/ShopRelatedBlock/mock.json

@@ -1,153 +0,0 @@
-{
-  "rich": {
-    "type": "related_shop",
-    "data": {
-      "url": "https://meduza.io/",
-
-      "cover": {
-        "ratio": 1.5,
-        "layout": "rich",
-        "urls": {
-          "w325": {
-            "1x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "1x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg"
-          },
-          "w600": {
-            "1x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "1x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg"
-          }
-        },
-        "gradients": {
-          "text_rgb": "0,0,0",
-          "bg_rgb": "214, 216, 207"
-        },
-        "tag": "Можно купить",
-        "first_title": "Шторка для камеры",
-        "second_title": "500р."
-      }
-    },
-    "only_on": "mobile"
-  },
-
-  "rich_dark": {
-    "type": "related_rich",
-    "data": {
-      "url": "https://meduza.io/",
-      "fallback": {
-        "data": {
-          "title": "Не богато вышло",
-          "related": [
-            {
-              "title": "«Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
-              "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
-              "layout": "rich",
-              "url": "feature/2018/09/18/na-rossiyskuyu-bolnitsu-pervye-podali-v-sud-za-otkaz-v-poseschenii-umirayuschego-v-reanimatsii-rodstvennika-sud-vstal-na-storonu-medikov",
-              "id": "0-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
-            }
-          ]
-        },
-        "only_on": "desktop"
-      },
-      "cover": {
-        "ratio": 1.5,
-        "layout": "rich",
-        "urls": {
-          "w325": {
-            "1x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "1x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg"
-          },
-          "w600": {
-            "1x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "1x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg"
-          }
-        },
-        "first_title": "Шторка для камеры",
-        "second_title": "500р.",
-
-        "tag": "Можно купить",
-        "gradients": {
-          "text_rgb": "255,255,255",
-          "bg_rgb": "0,0,0"
-        }
-      }
-    },
-    "only_on": "desktop"
-  },
-
-  "rich_and_featured_desktop": {
-    "type": "related_rich",
-    "data": {
-      "url": "https://meduza.io/",
-
-      "cover": {
-        "ratio": 1.5,
-        "layout": "rich",
-        "urls": {
-          "w325": {
-            "1x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "1x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg"
-          },
-          "w600": {
-            "1x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "1x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg",
-            "2x_webp": "//meduza.io/image/attachments/images/006/942/207/original/SvVDNHQAimcm6VGxS21y1A.jpg"
-          }
-        },
-        "first_title": "Шторка для камеры",
-        "second_title": "500р.",
-
-        "tag": "Можно купить",
-        "gradients": {
-          "text_rgb": "0,0,0",
-          "bg_rgb": "214, 216, 207"
-        }
-      }
-    },
-    "only_on": "desktop"
-  },
-
-  "rich_and_featured_mobile": {
-    "type": "related_rich",
-    "data": {
-      "url": "https://meduza.io/",
-
-      "cover": {
-        "ratio": 0.63,
-        "layout": "rich",
-        "urls": {
-          "w325": {
-            "1x": "http://meduza.io/impro/YW9jtqBkQc7dgyPKdgtvS8JlSvPyIgY7p-7-9C49csw/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNC81/NDMvOTE4L29yaWdp/bmFsLzRDeHQwdFR5/YWhlUGhnZHd4YVBz/R1EuanBn.jpg",
-            "2x": "http://meduza.io/impro/jQf0sx4Df9y23YQ0HKyGauLGYB6kMxQ_jR2QExB4_Q0/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNC81/NDMvOTE4L29yaWdp/bmFsLzRDeHQwdFR5/YWhlUGhnZHd4YVBz/R1EuanBn.jpg",
-            "1x_webp": "http://meduza.io/impro/dROSpimx8lYjBAbaWxhjPzPggOoz_RxV8useloSPgbQ/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNC81/NDMvOTE4L29yaWdp/bmFsLzRDeHQwdFR5/YWhlUGhnZHd4YVBz/R1EuanBn.webp",
-            "2x_webp": "http://meduza.io/impro/dgkov3ooEbjTSe1sUvY-NLVUr6y56Dbmtpke_g-i65c/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNC81/NDMvOTE4L29yaWdp/bmFsLzRDeHQwdFR5/YWhlUGhnZHd4YVBz/R1EuanBn.webp"
-          },
-          "w600": {
-            "1x": "http://meduza.io/impro/03bNGjN3Exb5vIT4jm4-VouBTahiFgH9gF8MhGd5hdw/fill/600/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNC81/NDMvOTE4L29yaWdp/bmFsLzRDeHQwdFR5/YWhlUGhnZHd4YVBz/R1EuanBn.jpg",
-            "2x": "http://meduza.io/impro/k7qCc2LDxE-qv6L2P5LBGo-Qmdlm68WxC2OIi6yg_SY/fill/1200/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNC81/NDMvOTE4L29yaWdp/bmFsLzRDeHQwdFR5/YWhlUGhnZHd4YVBz/R1EuanBn.jpg",
-            "1x_webp": "http://meduza.io/impro/4So4ZS9GWd3WTs4fUY7Lbk4CiKkoPhUQiigwXxZVGo0/fill/600/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNC81/NDMvOTE4L29yaWdp/bmFsLzRDeHQwdFR5/YWhlUGhnZHd4YVBz/R1EuanBn.webp",
-            "2x_webp": "http://meduza.io/impro/VZ5TtAH8GN9hENkyuoPhG7TvCLemOhHf1fgJKG9i5T4/fill/1200/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNC81/NDMvOTE4L29yaWdp/bmFsLzRDeHQwdFR5/YWhlUGhnZHd4YVBz/R1EuanBn.webp"
-          }
-        },
-        "tag": "Можно купить",
-        "gradients": {
-          "text_rgb": "255,255,255",
-          "bg_rgb": "0,0,0"
-        },
-        "first_title": "Шторка для камеры",
-        "second_title": "500р."
-      }
-    },
-    "only_on": "mobile"
-  }
-}