@meduza/ui-kit-2 0.1.25 → 0.1.27

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.25",
+  "version": "0.1.27",
   "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;
 }

package/src/RelatedBlock/index.tsx

@@ -26,7 +26,7 @@ export const RelatedBlock: React.FC<RelatedBlockProps> = ({
 
   const handleClick = (url) => {
     if (trackClick) {
-      postMessage('simpleRelated', 'click', url)
+      postMessage('simpleRelated', url, 'click')
     }
   }
 

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,
@@ -79,11 +79,11 @@
   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,7 +97,15 @@
   }
 }
 
-.isCard .body,
+.isRich {
+  color: #000;
+
+  @media $landscapeTablet {
+    color: #fff;
+  }
+}
+
+
 .isRich.hasGradient .body {
   position: absolute;
   z-index: 10;
@@ -113,23 +121,72 @@
 .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%);
   }
 }
 
@@ -139,11 +196,15 @@
   top: 15px;
   left: 15px;
 
-  color: #fff;
+  color: rgba(255, 255, 255, 0.7);
 
-  @media $mobile {
+  font-size: 12px;
+
+  @media $landscapeTablet {
     top: 20px;
     left: 20px;
+
+    color: #fff;
   }
 }
 

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({
@@ -107,7 +108,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 +121,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": {
@@ -88,7 +88,7 @@
         "only_on": "desktop"
       },
       "cover": {
-        "ratio": 1.4976958525,
+        "ratio": 1.5,
         "layout": "rich",
         "urls": {
           "w325": {
@@ -114,8 +114,8 @@
         {
           "type": "rich_title",
           "data": {
-            "first": "2 «Если кто-нибудь видит меня и слышит, пожалуйста, распространите это видео любым способом! Чтобы я существовал!»",
-            "second": "Автор фильма «Котлован» — о том, как сделал его из обращений россиян к Путину",
+            "first": "На HBO вышел сериал «Я исчезну во тьме» — о маньяке Джозефе Деанджело, которого не могли найти 40 лет",
+            "second": "Вот что мы узнали из первых эпизодов",
             "as": "h3",
             "featured": false
           },
@@ -161,7 +161,7 @@
         "only_on": "desktop"
       },
       "cover": {
-        "ratio": 1.4976958525,
+        "ratio": 1.5,
         "layout": "rich",
         "urls": {
           "w325": {

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,13 @@
   }
 }
 
+.richRelated {
+  @media $landscapeTablet {
+    font-size: 14px;
+    line-height: 16px;
+  }
+}
+
 .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 {