@meduza/ui-kit-2 0.4.15 → 0.5.2

package/src/RichTitle/RichTitle.module.css

@@ -3,9 +3,10 @@
 .root {
   margin: 0 0 20px;
 
-  font-family: $secondaryFont;
-  font-size: 19px;
   font-weight: 700;
+  font-size: 19px;
+
+  font-family: $secondaryFont;
   line-height: 23px;
 
   @media $portraitTablet {
@@ -21,9 +22,9 @@
 }
 
 .root span {
-  font-family: $primaryFont;
-  font-size: 20px;
   font-weight: normal;
+  font-size: 20px;
+  font-family: $primaryFont;
 
   @media $portraitTablet {
     font-size: 38px;
@@ -60,10 +61,10 @@
 
 .featured {
   @media $landscapeTabletMax {
-    letter-spacing: 0.3px;
 
     font-size: 28px;
     line-height: 30px;
+    letter-spacing: 0.3px;
   }
 }
 
@@ -104,17 +105,6 @@
   }
 }
 
-.isInPodcastPlayer {
-  margin-bottom: 20px;
-
-  font-size: 19px;
-  line-height: 23px;
-}
-
-.isInPodcastPlayer span {
-  font-size: 20px;
-}
-
 .mobile {
   @media $mobile {
     display: none;

package/src/ShopRelatedBlock/ShopRelatedBlock.module.css

@@ -0,0 +1,210 @@
+@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

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

package/src/ShopRelatedBlock/ShopRelatedBlock.stories.tsx

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,20 @@
+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

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

package/src/ShopRelatedBlock/index.tsx

@@ -0,0 +1,120 @@
+/* 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

@@ -0,0 +1,153 @@
+{
+  "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"
+  }
+}

package/src/SimpleBlock/SimpleBlock.types.ts

@@ -1,4 +1,5 @@
 export interface SimpleBlockProps {
   block: any
   styleContext?: string[] | string
+  id?: string
 }

package/src/SimpleBlock/index.tsx

@@ -7,7 +7,8 @@ import styles from './SimpleBlock.module.css'
 
 export const SimpleBlock: React.FC<SimpleBlockProps> = ({
   block: { data, type, only_on: onlyOn },
-  styleContext
+  styleContext,
+  id
 }) => {
   let TagName
 
@@ -42,6 +43,7 @@ export const SimpleBlock: React.FC<SimpleBlockProps> = ({
     <TagName
       className={makeClassName(classNames)}
       dangerouslySetInnerHTML={{ __html: data }}
+      id={id}
     />
   )
 }

package/src/Tag/Tag.module.css

@@ -28,6 +28,7 @@
 
 .large {
   @media $landscapeTablet {
+
     font-size: 14px;
     line-height: 16px;
     letter-spacing: 1px;
@@ -54,14 +55,11 @@
   color: inherit;
 }
 
-.custom {
-  color: var(--tagColor);
-}
-
 .is1to1,
 .is1to2,
 .isInSuperBlock {
   @media $landscapeTablet {
+
     font-size: 12px;
     line-height: 20px;
     letter-spacing: 1px;
@@ -71,6 +69,7 @@
 .is1to3,
 .is1to4 {
   @media $landscapeTablet {
+
     font-size: 10px;
     line-height: 15px;
     letter-spacing: 0.5px;
@@ -132,7 +131,3 @@
     display: block;
   }
 }
-
-.isInBookRelated {
-  margin-bottom: 6px;
-}