@meduza/ui-kit-2 0.1.38 → 0.1.39

package/package.json

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

package/src/EmbedBlock/EmbedBlock.module.css

@@ -201,8 +201,8 @@
   }
 }
 
-.isInCard:not(.cc):last-child,
-.isInSlide:not(.cc):last-child {
+.isInCard:not(.cc):last-child .figure,
+.isInSlide:not(.cc):last-child .figure {
   overflow: hidden;
 
   margin-bottom: -16px;
@@ -214,6 +214,15 @@
   }
 }
 
+.isInCard.isInSensitiveBlock:not(.cc) .figure,
+.isInSlide.isInSensitiveBlock:not(.cc) .figure {
+  overflow: visible;
+
+  margin-bottom: 0;
+
+  border-radius: 0;
+}
+
 .isInAnswer {
   margin-top: 12px;
   margin-bottom: 12px;
@@ -246,7 +255,6 @@
   position: static;
 }
 
-
 /* DEVICES */
 .mobile {
   @media $mobile {
@@ -268,7 +276,6 @@
   }
 }
 
-
 /* XS */
 .xs {
   @media $contentWidth {

package/src/Image/Image.module.css

@@ -6,13 +6,15 @@
 
   display: block;
   overflow: hidden;
+  transition: background-color 250ms ease;
+
+  background-color: #f2f2f2;
 
   @media $mobile {
     border-radius: inherit;
   }
 }
 
-.placeholder,
 .root img {
   position: absolute;
   top: 0;
@@ -22,6 +24,10 @@
   height: 100%;
 }
 
+.isLoaded {
+  background-color: transparent
+}
+
 .wrapper {
   display: block;
 
@@ -31,16 +37,6 @@
   background-size: 100% auto;
 }
 
-.placeholder {
-  transition: background-color 250ms ease;
-
-  background-color: #f2f2f2;
-}
-
-.loaded {
-  background: transparent;
-}
-
 .fullscreen picture {
   cursor: pointer;
 }

package/src/Image/Image.types.ts

@@ -35,4 +35,5 @@ export interface PictureProps {
   alt?: string
   fallbackSource: string
   display: string
+  onLoad: (boolean) => void
 }

package/src/Image/RenderPicture.tsx

@@ -8,7 +8,8 @@ export const RenderPicture: React.FC<PictureProps> = ({
   fallbackSource,
   optimized,
   alt,
-  display
+  display,
+  onLoad
 }) => {
   const [fallback, setFallback] = useState(false)
 
@@ -61,6 +62,7 @@ export const RenderPicture: React.FC<PictureProps> = ({
             : 'data:image/gif;base64,R0lGODlhAQABAPAAAPLy8gAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='
         }
         alt={alt}
+        onLoad={() => onLoad(true)}
       />
     </picture>
   )

package/src/Image/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import { ImageProps } from './Image.types'
 import { makeClassName } from '../utils/makeClassName'
 import BlockContext from '../utils/BlockContext'
@@ -22,6 +22,7 @@ export const Image: React.FC<ImageProps> = ({
   ratio
 }) => {
   const { lightBox } = useContext(BlockContext)
+  const [isLoaded, setIsLoaded] = useState(false)
 
   const handleClick = (): void => {
     if (!fullscreen || !lightBox || (optimized && !optimized.original)) {
@@ -44,14 +45,14 @@ export const Image: React.FC<ImageProps> = ({
     lightBox.show(optimized, width, height, alt)
   }
 
-  const pictureStyles = {
-    paddingBottom: `${100 / (ratio || width / height)}%`
-  }
-
   const blockStyles = {
     maxWidth: width <= 649 ? width : '100%'
   }
 
+  const pictureStyles = {
+    paddingBottom: `${100 / (ratio || width / height)}%`
+  }
+
   /* fallback w325 url until w6 was released */
   const fallbackSource =
     (source && source[0]) ||
@@ -62,6 +63,7 @@ export const Image: React.FC<ImageProps> = ({
     <div
       className={makeClassName([
         [styles.root, true],
+        [styles.isLoaded, !isLoaded],
         [styles.fullscreen, fullscreen && fullscreen.desktop]
       ])}
       style={blockStyles}
@@ -84,6 +86,7 @@ export const Image: React.FC<ImageProps> = ({
                 optimized={optimized}
                 alt={alt}
                 display={display}
+                onLoad={setIsLoaded}
               />
             </Lazy>
             <noscript>
@@ -97,6 +100,7 @@ export const Image: React.FC<ImageProps> = ({
             optimized={optimized}
             alt={alt}
             display={display}
+            onLoad={setIsLoaded}
           />
         )}
       </div>

package/src/Lazy/Lazy.module.css

@@ -3,7 +3,3 @@
 .root {
   display: block;
 }
-
-.visible {
-  color: red;
-}

package/src/RelatedBlock/RelatedBlock.types.ts

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

package/src/RelatedBlock/index.tsx

@@ -1,7 +1,6 @@
 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'
 
@@ -12,7 +11,6 @@ export const RelatedBlock: React.FC<RelatedBlockProps> = ({
     data: { title, related },
     only_on: onlyOn
   },
-  trackClick,
   styleContext
 }) => {
   let classNames: ClassNames = [
@@ -24,12 +22,6 @@ 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>
@@ -40,7 +32,6 @@ 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/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-target-blank */
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { RelatedRichBlockProps } from './RelatedRichBlock.types'
 
@@ -15,14 +15,11 @@ import { Image } from '../Image'
 
 import styles from './RelatedRichBlock.module.css'
 
-import { RelatedBlock } from '../RelatedBlock'
-
 export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
   block: {
     only_on: onlyOn,
     data: {
       blocks,
-      fallback,
       url,
       cover: { urls, gradients, tag, layout, ratio }
     }
@@ -32,14 +29,8 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
   const style: React.CSSProperties = {}
   const styleHeader: React.CSSProperties = {}
 
-  const [type, setType] = useState('unset')
-
   const cardType = `is${toCapitalize(layout)}`
 
-  useEffect(() => {
-    setType(Math.random() >= 0.5 ? 'simpleRelated' : 'richRelated')
-  }, [])
-
   const [ref, inView] = useInView({
     threshold: 0,
     triggerOnce: true
@@ -52,13 +43,13 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
         (onlyOn === 'desktop' && window.innerWidth >= 512) ||
         !onlyOn
       ) {
-        postMessage(type, url, 'view')
+        postMessage('richRelated', url, 'view')
       }
     }
   }, [inView])
 
   const handleClick = () => {
-    postMessage(type, url, 'click')
+    postMessage('richRelated', url, 'click')
   }
 
   let classNames: ClassNames = [
@@ -93,22 +84,6 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
     }
   }
 
-  if (type === 'unset') {
-    return <div className={styles.wrapper} />
-  }
-
-  if (type === 'simpleRelated') {
-    return (
-      <div ref={ref} className={styles.wrapper}>
-        <RelatedBlock
-          block={fallback}
-          trackClick={true}
-          styleContext={styleContext}
-        />
-      </div>
-    )
-  }
-
   return (
     <a
       data-testid="related-rich-block"

package/src/SensitiveBlock/SensitiveBlock.module.css

@@ -29,8 +29,10 @@
 
 .container {
   position: relative;
-  transition: min-height 350ms ease;
+
   min-height: 170px;
+
+  transition: min-height 350ms ease;
 }
 
 .overlay {
@@ -75,12 +77,19 @@
   width: 100%;
   max-width: 368px;
   margin-top: 0;
-  margin-bottom: 24px;
+  margin-bottom: 12px;
 
   text-align: center;
 
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 14px;
+  line-height: 18px;
+
+  @media $mobile {
+    margin-bottom: 24px;
+
+    font-size: 16px;
+    line-height: 22px;
+  }
 }
 
 .button {
@@ -107,13 +116,23 @@
   }
 }
 
-.full .container {
-  margin-right: -20px;
-  margin-left: -20px;
+.full .overlay {
+  right: -20px;
+  left: -20px;
 
   @media $mobile {
-    margin-right: 0;
-    margin-left: 0;
+    right: 0;
+    left: 0;
+  }
+}
+
+.full .media {
+  padding-right: 20px;
+  padding-left: 20px;
+
+  @media $mobile {
+    padding-right: 0;
+    padding-left: 0;
   }
 }
 
@@ -121,13 +140,19 @@
   max-width: 100%;
 }
 
-.super_full .container {
+.super_full .overlay {
   @media $mobile {
-    margin-right: -15px;
-    margin-left: -15px;
+    right: -15px;
+    left: -15px;
   }
 }
 
+.super_full .media {
+  @media $mobile {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
 
 /* STATE */
 .visible .overlay {
@@ -141,3 +166,12 @@
 .visible .container {
   min-height: 0;
 }
+
+/* CONTEXT */
+.isInCard .overlay,
+.isInSlide .overlay {
+  @media $landscapeTabletMax {
+    right: -11px;
+    left: -11px;
+  }
+}

package/src/SensitiveBlock/SensitiveBlock.types.ts

@@ -11,5 +11,5 @@ export interface SensitiveBlockProps {
     caption?: string
     cc: string
   }
-  styleContext?: string[] | string
+  styleContext?: string[]
 }

package/src/SensitiveBlock/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { SensitiveBlockProps } from './SensitiveBlock.types'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
 
 import { EmbedBlockContainer } from '../EmbedBlock'
 import { MediaCaption } from '../MediaCaption'
@@ -24,15 +25,21 @@ export const SensitiveBlock: React.FC<SensitiveBlockProps> = ({
     isVisible(true)
   }
 
+  let classNames: ClassNames = [
+    [styles.root, true],
+    [styles.visible, visible],
+    [styles[display], display && styles[display]]
+  ]
+
+  let context = ['isInSensitiveBlock']
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+    context = [...styleContext, 'isInSensitiveBlock']
+  }
+
   return (
-    <div
-      data-testid="sensitive-block"
-      className={makeClassName([
-        [styles.root, true],
-        [styles.visible, visible],
-        [styles[display], display && styles[display]]
-      ])}
-    >
+    <div data-testid="sensitive-block" className={makeClassName(classNames)}>
       <div className={styles.container}>
         <div
           className={styles.overlay}
@@ -49,10 +56,7 @@ export const SensitiveBlock: React.FC<SensitiveBlockProps> = ({
           </div>
         </div>
         <div className={styles.media}>
-          <EmbedBlockContainer
-            block={block.item}
-            styleContext={['isInSensitiveBlock']}
-          />
+          <EmbedBlockContainer block={block.item} styleContext={context} />
         </div>
       </div>