@meduza/ui-kit-2 0.1.26 → 0.1.28

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.26",
+  "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

@@ -5,7 +5,7 @@
 
   font-family: $secondaryFont;
   font-size: 12px;
-  line-height: 14px;
+  line-height: 15px;
 
   fill: inherit;
 }
@@ -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

@@ -7,15 +7,12 @@
   display: block;
   overflow: hidden;
 
-  min-height: 434px;
-
   text-decoration: none;
 
   border-radius: 8px;
   outline-width: 0;
 }
 
-.root::before,
 .root::after {
   position: absolute;
   z-index: 20;
@@ -30,11 +27,14 @@
 }
 
 .root::before {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: block;
+
+  width: 100%;
 }
 
 .root::after {
-  box-shadow: inset 0 4px #b88b59, inset 0 5px rgba(0, 0, 0, 0.2);
+  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,
@@ -66,24 +66,16 @@
   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;
   justify-content: flex-end;
 
-  padding: 15px;
+  padding: 15px 15px 12px;
 
   background-color: #f7f7f7;
 
-  @media $mobile {
+  @media $landscapeTablet {
     position: absolute;
     z-index: 10;
     right: 0;
@@ -97,66 +89,158 @@
   }
 }
 
-.isCard .body,
+.isRich {
+  color: #000;
+
+  @media $landscapeTablet {
+    color: #fff;
+  }
+}
+
 .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 {
   color: #fff;
   background-color: #191919;
+
+  @media $mobile {
+    min-height: 350px;
+  }
+}
+
+.isCard .body {
+  background-color: transparent;
+
+  @media $mobile {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    min-height: 295px;
+  }
+}
+
+.isCard::before {
+  @media $mobile {
+    padding-bottom: 66.66%;
+
+    content: '';
+  }
 }
 
 .isCard .cover {
+  position: relative;
+
+  width: 100%;
+
+  @media $mobile {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+}
+
+.isCard .cover::before {
+  display: block;
+
+  padding-bottom: 78.50746269%;
+
+  content: '';
+
+  @media $mobile {
+    content: none;
+  }
+}
+
+.isCard .picture {
   position: absolute;
-  top: 17.2811059908%;
+  top: 50%;
   left: 50%;
 
-  width: 170px;
+  width: 180px;
+  height: 180px;
 
-  transform: translate(-50%, 0);
-}
+  transform: translate(-50%, -50%);
 
-.isRich {
-  color: #000;
+  @media $mobile {
+    top: 25%;
 
-  @media $landscapeTablet {
-    color: #fff;
+    transform: translate(-50%, -25%);
   }
 }
 
 .tag {
   position: absolute;
   z-index: 10;
-  top: 15px;
+  top: 14px;
+  right: 15px;
   left: 15px;
 
-  color: #fff;
+  color: rgba(255, 255, 255, 0.7);
 
-  @media $mobile {
-    top: 20px;
+  font-size: 12px;
+
+  @media $landscapeTablet {
+    top: 16px;
+    right: 20px;
     left: 20px;
   }
 }
 
+.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/RelatedRichBlock.stories.tsx

@@ -17,7 +17,6 @@ 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

@@ -37,7 +37,8 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
   const cardType = `is${toCapitalize(layout)}`
 
   useEffect(() => {
-    setType(Math.random() >= 0.5 ? 'simpleRelated' : 'richRelated')
+    // setType(Math.random() >= 0.5 ? 'simpleRelated' : 'richRelated')
+    setType('richRelated')
   }, [])
 
   const [ref, inView] = useInView({
@@ -77,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') {
@@ -107,7 +111,7 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
     <a
       data-testid="related-rich-block"
       className={makeClassName(classNames)}
-      href={url}
+      href={`/${url}`}
       target="_blank"
       onClick={(): void => handleClick()}
       ref={ref}
@@ -120,12 +124,14 @@ export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
       )}
 
       <div className={styles.tag}>
-        <Tag size="small" theme="inherit" styleContext="rich">
+        <Tag size="small" theme="inherit" styleContext="richRelated">
           {tag}
         </Tag>
       </div>
       <div className={styles.cover}>
-        <Image optimized={urls} ratio={ratio} display="narrow" />
+        <div className={styles.picture}>
+          <Image optimized={urls} ratio={ratio} display="narrow" />
+        </div>
       </div>
       <div className={styles.body}>
         {blocks.map((item) => (

package/src/RelatedRichBlock/mock.json

@@ -19,7 +19,7 @@
         "only_on": "mobile"
       },
       "cover": {
-        "ratio": 1.4976958525,
+        "ratio": 1.5,
         "layout": "rich",
         "urls": {
           "w325": {
@@ -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"
               }
@@ -88,7 +93,7 @@
         "only_on": "desktop"
       },
       "cover": {
-        "ratio": 1.4976958525,
+        "ratio": 1.5,
         "layout": "rich",
         "urls": {
           "w325": {
@@ -114,8 +119,8 @@
         {
           "type": "rich_title",
           "data": {
-            "first": "2 «Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
-            "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
+            "first": "На HBO вышел сериал «Я исчезну во тьме» — о маньяке Джозефе Деанджело, которого не могли найти 40 лет",
+            "second": "Вот что мы узнали из первых эпизодов",
             "as": "h3",
             "featured": false
           },
@@ -128,6 +133,7 @@
             "components": [
               {
                 "type": "datetime",
+                "format": "fromNow",
                 "datetime": 1600593764,
                 "id": "7639a7d1455a1ca907de0fc98a22b017e23f30e7df15b0739c78418848d674b5"
               }
@@ -161,7 +167,7 @@
         "only_on": "desktop"
       },
       "cover": {
-        "ratio": 1.4976958525,
+        "ratio": 1.5,
         "layout": "rich",
         "urls": {
           "w325": {
@@ -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/RichTitle/RichTitle.module.css

@@ -85,18 +85,16 @@
   line-height: 23px;
 
   @media $landscapeTablet {
-    font-size: 26px;
-    line-height: 32px;
+    font-size: 1.3rem;
+    line-height: 1.6rem;
   }
 }
 
 .isInMediaBlock:not(.featured) span {
   font-size: 20px;
-  line-height: 23px;
 
   @media $landscapeTablet {
-    font-size: 27px;
-    line-height: 32px;
+    font-size: 1.35rem;
   }
 }
 

package/src/RichTitle/RichTitle.types.ts

@@ -5,6 +5,7 @@ export interface RichTitleProps {
       featured?: boolean
       first: string
       second?: string
+      as?: keyof JSX.IntrinsicElements
     }
   }
   styleContext?: string[] | string

package/src/RichTitle/index.tsx

@@ -8,7 +8,7 @@ import styles from './RichTitle.module.css'
 export const RichTitle: React.FC<RichTitleProps> = ({
   block: {
     only_on: onlyOn,
-    data: { featured, first, second }
+    data: { featured, first, second, as: TagName = 'h1' }
   },
   styleContext
 }) => {
@@ -23,9 +23,9 @@ export const RichTitle: React.FC<RichTitleProps> = ({
   }
 
   return (
-    <h1 data-testid="rich-title" className={makeClassName(classNames)}>
+    <TagName data-testid="rich-title" className={makeClassName(classNames)}>
       {first}
       {second && <span> {second}</span>}
-    </h1>
+    </TagName>
   )
 }

package/src/Tag/Tag.module.css

@@ -83,6 +83,16 @@
   }
 }
 
+.richRelated {
+  font-size: 12px;
+  line-height: 17px;
+
+  @media $landscapeTablet {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
 .slide,
 .game,
 .card,

package/src/_storybook/PreviewWrapper/PreviewWrapper.module.css

@@ -64,9 +64,21 @@
       format('woff');
 }
 
+/* set font-size as website */
+html {
+  @media (min-width: 1000px) {
+    font-size: calc(100vw / 66.75);
+  }
+
+  @media (min-width: 1335px) {
+    font-size: 20px;
+  }
+}
+
 .root {
   color: #000;
   background: #fff;
+
 }
 
 .sideBySide {