@meduza/ui-kit-2 0.1.27 → 0.1.28

package/package.json

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

package/src/Meta/Meta.module.css

@@ -20,7 +20,7 @@
 .isInMaterial {
   width: 100%;
 
-  color: $nikel;
+  color: rgba(0, 0, 0, 0.4);
 }
 
 .podcast {
@@ -31,6 +31,7 @@
   color: rgba(255, 255, 255, 0.7);
 }
 
+.center.isInMediaBlock,
 .center.half {
   @media $landscapeTablet {
     text-align: left;

package/src/Meta/MetaContainer.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { toCamel } from '../utils/converCase'
+
 import { MetaContainerProps } from './Meta.types'
 import { Meta } from './'
 import { MetaItem } from '../MetaItem'
@@ -8,6 +10,8 @@ import { BookmarkButton } from '../BookmarkButton'
 import { Timestamp } from '../Timestamp'
 import { SvgSymbol } from '../SvgSymbol'
 
+import { TimestampProps } from '../Timestamp/Timestamp.types'
+
 import styles from './Meta.module.css'
 
 export const MetaContainer: React.FC<MetaContainerProps> = ({
@@ -68,6 +72,9 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
             )
           }
           case 'datetime': {
+            const format = (toCamel(component.format) ||
+              'date') as TimestampProps['type']
+
             return (
               <MetaItem
                 hasSource={hasSource}
@@ -77,7 +84,7 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
               >
                 <Timestamp
                   publishedAt={component.datetime}
-                  type="date"
+                  type={format || 'date'}
                   locale={lang}
                 />
               </MetaItem>

package/src/RelatedRichBlock/RelatedRichBlock.module.css

@@ -66,14 +66,6 @@
   height: 150px;
 }
 
-.isRich .overlayHeader {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.5) 0%,
-    rgba(0, 0, 0, 0) 97%
-  );
-}
-
 .body {
   display: flex;
   flex-flow: column nowrap;
@@ -105,17 +97,36 @@
   }
 }
 
-
 .isRich.hasGradient .body {
+  @media $landscapeTablet {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    min-height: 295px;
+
+    background-color: transparent;
+  }
+}
+
+.isRich .picture {
+  position: relative;
+}
+
+.isRich .picture::after {
   position: absolute;
   z-index: 10;
+  top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 
-  min-height: 295px;
+  content: '';
 
-  background-color: transparent;
+  border-radius: 8px 8px 0 0;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .isCard {
@@ -193,7 +204,8 @@
 .tag {
   position: absolute;
   z-index: 10;
-  top: 15px;
+  top: 14px;
+  right: 15px;
   left: 15px;
 
   color: rgba(255, 255, 255, 0.7);
@@ -201,23 +213,34 @@
   font-size: 12px;
 
   @media $landscapeTablet {
-    top: 20px;
+    top: 16px;
+    right: 20px;
     left: 20px;
-
-    color: #fff;
   }
 }
 
+.center {
+  width: 100%;
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 /* Themes */
 
-.isRich.dark,
-.isRich.dark .tag {
+.isRich.dark {
   color: #000;
 }
 
+.isRich.dark .tag {
+  color: rgba(0, 0, 0, 0.7);
+}
+
 .isRich.light {
-  color: #fff;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  @media $mobile {
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  }
 }
 
 /* Display */

package/src/RelatedRichBlock/index.tsx

@@ -78,18 +78,21 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
   }
 
   if (gradients) {
-    const theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light']
-
-    classNames = makeStyleContext(classNames, theme, styles)
-
     styleHeader.backgroundImage = generateGradient(
       gradients.bg_rgb,
       'mediaBlockTop'
     )
-    style.backgroundImage = generateGradient(
-      gradients.bg_rgb,
-      'mediaBlockBottom'
-    )
+
+    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'
+      )
+    }
   }
 
   if (type === 'unset') {

package/src/RelatedRichBlock/mock.json

@@ -35,6 +35,10 @@
             "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
           }
         },
+        "gradients": {
+          "text_rgb": "0,0,0",
+          "bg_rgb": "171,209,171"
+        },
         "tag": "Читайте также"
       },
       "blocks": [
@@ -55,6 +59,7 @@
             "components": [
               {
                 "type": "datetime",
+                "format": "fromNow",
                 "datetime": 1600593764,
                 "id": "7639a7d1455a1ca907de0fc98a22b017e23f30e7df15b0739c78418848d674b5"
               }
@@ -128,6 +133,7 @@
             "components": [
               {
                 "type": "datetime",
+                "format": "fromNow",
                 "datetime": 1600593764,
                 "id": "7639a7d1455a1ca907de0fc98a22b017e23f30e7df15b0739c78418848d674b5"
               }
@@ -201,6 +207,7 @@
             "components": [
               {
                 "type": "datetime",
+                "format": "fromNow",
                 "datetime": 1600593764,
                 "id": "7639a7d1455a1ca907de0fc98a22b017e23f30e7df15b0739c78418848d674b5"
               }
@@ -274,6 +281,7 @@
             "components": [
               {
                 "type": "datetime",
+                "format": "fromNow",
                 "datetime": 1600593764,
                 "id": "7639a7d1455a1ca907de0fc98a22b017e23f30e7df15b0739c78418848d674b5"
               }
@@ -340,6 +348,7 @@
             "components": [
               {
                 "type": "datetime",
+                "format": "fromNow",
                 "datetime": 1600593764,
                 "id": "7639a7d1455a1ca907de0fc98a22b017e23f30e7df15b0739c78418848d674b5"
               }

package/src/Tag/Tag.module.css

@@ -84,9 +84,12 @@
 }
 
 .richRelated {
+  font-size: 12px;
+  line-height: 17px;
+
   @media $landscapeTablet {
     font-size: 14px;
-    line-height: 16px;
+    line-height: 20px;
   }
 }