@meduza/ui-kit-2 0.1.24 → 0.1.26

package/dist/utils/postMessage.d.ts

@@ -1,2 +1,2 @@
-declare const postMessage: (element: string, action: string) => void;
+declare const postMessage: (category: string, element: string, action: string) => void;
 export default postMessage;

package/package.json

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

package/src/Image/index.tsx

@@ -40,7 +40,7 @@ export const Image: React.FC<ImageProps> = ({
       return
     }
 
-    postMessage('fullscreen_click', 'click')
+    postMessage('', 'fullscreen_click', 'click')
     lightBox.show(optimized, width, height, alt)
   }
 

package/src/RelatedBlock/RelatedBlock.types.ts

@@ -13,5 +13,6 @@ export interface RelatedBlockProps {
     }
     only_on?: string
   }
+  trackClick?: boolean
   styleContext?: string[] | string
 }

package/src/RelatedBlock/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { RelatedBlockProps } from './RelatedBlock.types'
 import { makeClassName, ClassNames } from '../utils/makeClassName'
+import postMessage from '../utils/postMessage'
+
 import makeStyleContext from '../utils/makeStyleContext'
 
 import styles from './RelatedBlock.module.css'
@@ -10,6 +12,7 @@ export const RelatedBlock: React.FC<RelatedBlockProps> = ({
     data: { title, related },
     only_on: onlyOn
   },
+  trackClick,
   styleContext
 }) => {
   let classNames: ClassNames = [
@@ -21,6 +24,12 @@ export const RelatedBlock: React.FC<RelatedBlockProps> = ({
     classNames = makeStyleContext(classNames, styleContext, styles)
   }
 
+  const handleClick = (url) => {
+    if (trackClick) {
+      postMessage('simpleRelated', url, 'click')
+    }
+  }
+
   return (
     <div data-testid="related-block" className={makeClassName(classNames)}>
       <h3 className={styles.header}>{title}</h3>
@@ -31,6 +40,7 @@ export const RelatedBlock: React.FC<RelatedBlockProps> = ({
               href={item.full_url || `/${item.url}`}
               target="_blank"
               rel="noopener noreferrer"
+              onClick={(): void => handleClick(item.full_url || item.url)}
             >
               <span className={styles.first}>{item.title}</span>
               {item.second_title && ' '}

package/src/RelatedRichBlock/RelatedRichBlock.module.css

@@ -37,6 +37,15 @@
   box-shadow: inset 0 4px #b88b59, inset 0 5px rgba(0, 0, 0, 0.2);
 }
 
+.root,
+.wrapper {
+  margin: 16px 0;
+
+  @media $portraitTablet {
+    margin: 25px 0;
+  }
+}
+
 .overlay,
 .overlayHeader {
   position: absolute;
@@ -55,12 +64,14 @@
   top: 0;
 
   height: 150px;
-
-
 }
 
 .isRich .overlayHeader {
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 97%);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.5) 0%,
+    rgba(0, 0, 0, 0) 97%
+  );
 }
 
 .body {

package/src/RelatedRichBlock/RelatedRichBlock.stories.tsx

@@ -17,6 +17,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
+        <div style={{ height: '1000px' }}></div>
         <div className={styles.card}>
           <RelatedRichBlock block={mock.rich} styleContext={['no_mods']} />
         </div>

package/src/RelatedRichBlock/index.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable react/jsx-no-target-blank */
 import React, { useState, useEffect } from 'react'
+import { useInView } from 'react-intersection-observer'
 import { RelatedRichBlockProps } from './RelatedRichBlock.types'
 
+import postMessage from '../utils/postMessage'
 import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
 import generateGradient from '../utils/generateGradient'
@@ -30,15 +32,35 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
   const style: React.CSSProperties = {}
   const styleHeader: React.CSSProperties = {}
 
-  const [isRich, setIsRich] = useState(false)
+  const [type, setType] = useState('unset')
 
   const cardType = `is${toCapitalize(layout)}`
 
   useEffect(() => {
-    // setIsRich(Math.random() >= 0.5)
-    setIsRich(true)
+    setType(Math.random() >= 0.5 ? 'simpleRelated' : 'richRelated')
   }, [])
 
+  const [ref, inView] = useInView({
+    threshold: 0,
+    triggerOnce: true
+  })
+
+  useEffect(() => {
+    if (inView) {
+      if (
+        (onlyOn === 'mobile' && window.innerWidth <= 511) ||
+        (onlyOn === 'desktop' && window.innerWidth >= 512) ||
+        !onlyOn
+      ) {
+        postMessage(type, url, 'view')
+      }
+    }
+  }, [inView])
+
+  const handleClick = () => {
+    postMessage(type, url, 'click')
+  }
+
   let classNames: ClassNames = [
     [styles.root, true],
     [styles[cardType], !!layout && !!styles[cardType]],
@@ -69,8 +91,16 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
     )
   }
 
-  if (!isRich) {
-    return <RelatedBlock block={fallback} />
+  if (type === 'unset') {
+    return <div className={styles.wrapper} />
+  }
+
+  if (type === 'simpleRelated') {
+    return (
+      <div ref={ref} className={styles.wrapper}>
+        <RelatedBlock block={fallback} trackClick={true} />
+      </div>
+    )
   }
 
   return (
@@ -79,6 +109,8 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
       className={makeClassName(classNames)}
       href={url}
       target="_blank"
+      onClick={(): void => handleClick()}
+      ref={ref}
     >
       {layout === 'rich' && (
         <>

package/src/RelatedRichBlock/mock.json

@@ -41,7 +41,7 @@
         {
           "type": "rich_title",
           "data": {
-            "first": "«Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
+            "first": "1 «Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
             "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
             "as": "h3",
             "featured": false
@@ -114,7 +114,7 @@
         {
           "type": "rich_title",
           "data": {
-            "first": "«Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
+            "first": "2 «Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
             "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
             "as": "h3",
             "featured": false
@@ -187,7 +187,7 @@
         {
           "type": "rich_title",
           "data": {
-            "first": "«Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
+            "first": "3 «Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
             "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
             "as": "h3",
             "featured": false
@@ -260,7 +260,7 @@
         {
           "type": "rich_title",
           "data": {
-            "first": "«В биеннале есть что-то очень садистское»",
+            "first": "4 «В биеннале есть что-то очень садистское»",
             "second": "Куратор Венецианской биеннале современного искусства Ральф Ругофф — как он добивался, чтобы выставка не была для зрителей мучением",
             "as": "h3",
             "featured": true
@@ -327,7 +327,7 @@
         {
           "type": "rich_title",
           "data": {
-            "first": "До «обнуления» много говорили, что Путин в 2024 году может уйти в Госсовет. Теперь закон о нем внесли в Думу. Что там сказано?",
+            "first": "5 До «обнуления» много говорили, что Путин в 2024 году может уйти в Госсовет. Теперь закон о нем внесли в Думу. Что там сказано?",
             "as": "h3",
             "featured": false
           },

package/src/Spoiler/index.tsx

@@ -28,13 +28,13 @@ export const Spoiler: React.FC<SpoilerProps> = ({
     setSpoiled(!spoiled)
 
     if (spoiled) {
-      postMessage('closeSpoiler', 'click')
+      postMessage('', 'closeSpoiler', 'click')
       const rect = ref.current.getBoundingClientRect()
       if (rect.top < 0) {
         ref.current.scrollIntoView({ behavior: 'smooth' })
       }
     } else {
-      postMessage('openSpoiler', 'click')
+      postMessage('', 'openSpoiler', 'click')
     }
   }
 

package/src/utils/postMessage.ts

@@ -1,9 +1,14 @@
 const POST_MESSAGE_PREFIX = 'mdzKitMsg'
 
-const postMessage = (element: string, action: string): void => {
+const postMessage = (
+  category: string,
+  element: string,
+  action: string
+): void => {
   const target = window.top
 
   const msg = `${POST_MESSAGE_PREFIX}=${JSON.stringify({
+    category,
     element,
     action
   })}`