@meduza/ui-kit-2 1.2.0 → 1.3.0

package/dist/ui-kit-game.css

@@ -1346,6 +1346,8 @@
   }
 
 .Tag-module_isInBlockMetaContainer__bAmLh {
+  margin-top: -1px;
+
   line-height: 15px;
 }
 
@@ -3192,6 +3194,8 @@
 @media only screen and (max-width: 40.5625em) {
 
 .RichTitle-module_isInFeaturedBlock__3vYu9 {
+    margin-bottom: 16px;
+
     font-size: 22px;
     line-height: 110%;
 }
@@ -4676,7 +4680,7 @@ a mark {
 .MetaItem-module_root__sRbrZ {
   display: inline;
 
-  margin-right: 15px;
+  margin-right: 6px;
 }
 
 .MetaItem-module_root__sRbrZ > svg {
@@ -4761,28 +4765,16 @@ a mark {
 }
   }
 
-.MetaItem-module_mobileOnly__VJCjl {
-  margin-right: 6px;
-}
-
-@media only screen and (min-width: 40.625em) {
-
-.MetaItem-module_mobileOnly__VJCjl {
-    display: none;
-}
-  }
-
-.MetaItem-module_mobileOnly__VJCjl + .MetaItem-module_hasBullets__b1eW9::before {
+.MetaItem-module_tag__3HzOp + .MetaItem-module_hasBullets__b1eW9::before {
   content: none;
 }
 
 .MetaItemLive-module_root__XfQiW {
   position: relative;
 
-  display: inline-block;
-
-  width: 18px;
-  height: 18px;
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
 
   vertical-align: middle;
 }
@@ -4791,110 +4783,36 @@ a mark {
   color: #b88b59;
 }
 
-.MetaItemLive-module_root__XfQiW::before,
-.MetaItemLive-module_root__XfQiW::after,
-.MetaItemLive-module_frame__FHByQ {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-}
-
-.MetaItemLive-module_root__XfQiW {
-  margin-top: -4px;
-  margin-right: 1px;
-
-  transform: translateY(1px);
-}
-
-.MetaItemLive-module_root__XfQiW::before,
-.MetaItemLive-module_root__XfQiW::after,
-.MetaItemLive-module_frame__FHByQ {
-
-  border-radius: 50%;
-  transform: scale(0);
-
-  animation-duration: 1.05s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-.MetaItemLive-module_frame__FHByQ {
-
-  background: currentColor;
-
-  animation-name: MetaItemLive-module_liveMiddle__SX4Gs;
-}
-
-.MetaItemLive-module_root__XfQiW::before,
-.MetaItemLive-module_root__XfQiW::after {
-
-  border: 1px solid currentColor;
-
-  content: '';
-}
+.MetaItemLive-module_icon__JIMLl {
+  width: 10px;
+  height: 10px;
+  margin-top: -1px;
 
-.MetaItemLive-module_root__XfQiW::before {
-  animation-name: MetaItemLive-module_liveFirstWave__QqstP;
-}
+  background-color: #ff4e4e;
+  border-radius: 5px;
 
-.MetaItemLive-module_root__XfQiW::after {
-  animation-name: MetaItemLive-module_liveSecondWave__hlbpt;
+  animation: MetaItemLive-module_pulse__zzrle 2s infinite ease-out;
 }
 
-@keyframes MetaItemLive-module_liveMiddle__SX4Gs {
-  14% {
-    transform: scale(0);
-  }
-
-  30% {
-    transform: scale(0.22);
-  }
-
-  63% {
-    transform: scale(0.22);
-  }
-
-  70% {
-    transform: scale(0);
-  }
-
-  100% {
-    transform: scale(0);
-  }
+.MetaItemLive-module_text__wgLcT {
+  color: #ff4e4e;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
 }
 
-@keyframes MetaItemLive-module_liveFirstWave__QqstP {
-  21% {
-    transform: scale(0.1);
-  }
-
-  53% {
-    transform: scale(0.33);
+@keyframes MetaItemLive-module_pulse__zzrle {
+  0% {
+    opacity: 1;
   }
 
-  100% {
-    transform: scale(0.66);
-
+  50% {
     opacity: 0;
   }
-}
-
-@keyframes MetaItemLive-module_liveSecondWave__hlbpt {
-  21% {
-    transform: scale(0.22);
-  }
-
-  53% {
-    transform: scale(0.55);
-  }
 
   100% {
-    transform: scale(0.88);
-
-    opacity: 0;
+    opacity: 1;
   }
 }
 

package/dist/ui-kit.css

@@ -1346,6 +1346,8 @@
   }
 
 .Tag-module_isInBlockMetaContainer__bAmLh {
+  margin-top: -1px;
+
   line-height: 15px;
 }
 
@@ -3192,6 +3194,8 @@
 @media only screen and (max-width: 63.9375em) {
 
 .RichTitle-module_isInFeaturedBlock__3vYu9 {
+    margin-bottom: 16px;
+
     font-size: 22px;
     line-height: 110%;
 }
@@ -4676,7 +4680,7 @@ a mark {
 .MetaItem-module_root__sRbrZ {
   display: inline;
 
-  margin-right: 15px;
+  margin-right: 6px;
 }
 
 .MetaItem-module_root__sRbrZ > svg {
@@ -4761,28 +4765,16 @@ a mark {
 }
   }
 
-.MetaItem-module_mobileOnly__VJCjl {
-  margin-right: 6px;
-}
-
-@media only screen and (min-width: 48em) {
-
-.MetaItem-module_mobileOnly__VJCjl {
-    display: none;
-}
-  }
-
-.MetaItem-module_mobileOnly__VJCjl + .MetaItem-module_hasBullets__b1eW9::before {
+.MetaItem-module_tag__3HzOp + .MetaItem-module_hasBullets__b1eW9::before {
   content: none;
 }
 
 .MetaItemLive-module_root__XfQiW {
   position: relative;
 
-  display: inline-block;
-
-  width: 18px;
-  height: 18px;
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
 
   vertical-align: middle;
 }
@@ -4791,110 +4783,36 @@ a mark {
   color: #b88b59;
 }
 
-.MetaItemLive-module_root__XfQiW::before,
-.MetaItemLive-module_root__XfQiW::after,
-.MetaItemLive-module_frame__FHByQ {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-}
-
-.MetaItemLive-module_root__XfQiW {
-  margin-top: -4px;
-  margin-right: 1px;
-
-  transform: translateY(1px);
-}
-
-.MetaItemLive-module_root__XfQiW::before,
-.MetaItemLive-module_root__XfQiW::after,
-.MetaItemLive-module_frame__FHByQ {
-
-  border-radius: 50%;
-  transform: scale(0);
-
-  animation-duration: 1.05s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-.MetaItemLive-module_frame__FHByQ {
-
-  background: currentColor;
-
-  animation-name: MetaItemLive-module_liveMiddle__SX4Gs;
-}
-
-.MetaItemLive-module_root__XfQiW::before,
-.MetaItemLive-module_root__XfQiW::after {
-
-  border: 1px solid currentColor;
-
-  content: '';
-}
+.MetaItemLive-module_icon__JIMLl {
+  width: 10px;
+  height: 10px;
+  margin-top: -1px;
 
-.MetaItemLive-module_root__XfQiW::before {
-  animation-name: MetaItemLive-module_liveFirstWave__QqstP;
-}
+  background-color: #ff4e4e;
+  border-radius: 5px;
 
-.MetaItemLive-module_root__XfQiW::after {
-  animation-name: MetaItemLive-module_liveSecondWave__hlbpt;
+  animation: MetaItemLive-module_pulse__zzrle 2s infinite ease-out;
 }
 
-@keyframes MetaItemLive-module_liveMiddle__SX4Gs {
-  14% {
-    transform: scale(0);
-  }
-
-  30% {
-    transform: scale(0.22);
-  }
-
-  63% {
-    transform: scale(0.22);
-  }
-
-  70% {
-    transform: scale(0);
-  }
-
-  100% {
-    transform: scale(0);
-  }
+.MetaItemLive-module_text__wgLcT {
+  color: #ff4e4e;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
 }
 
-@keyframes MetaItemLive-module_liveFirstWave__QqstP {
-  21% {
-    transform: scale(0.1);
-  }
-
-  53% {
-    transform: scale(0.33);
+@keyframes MetaItemLive-module_pulse__zzrle {
+  0% {
+    opacity: 1;
   }
 
-  100% {
-    transform: scale(0.66);
-
+  50% {
     opacity: 0;
   }
-}
-
-@keyframes MetaItemLive-module_liveSecondWave__hlbpt {
-  21% {
-    transform: scale(0.22);
-  }
-
-  53% {
-    transform: scale(0.55);
-  }
 
   100% {
-    transform: scale(0.88);
-
-    opacity: 0;
+    opacity: 1;
   }
 }
 

package/package.json

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

package/src/Meta/MetaContainer.tsx

@@ -101,7 +101,7 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
           case 'broadcast_active': {
             return (
               <MetaItem hasSource={hasSource} bullets key={component.id}>
-                <MetaItemLive /> Прямой эфир
+                <MetaItemLive>Прямой эфир</MetaItemLive>
               </MetaItem>
             )
           }

package/src/MetaItem/MetaItem.module.css

@@ -1,7 +1,7 @@
 .root {
   display: inline;
 
-  margin-right: 15px;
+  margin-right: 6px;
 }
 
 .root > svg {
@@ -79,14 +79,6 @@
   }
 }
 
-.mobileOnly {
-  margin-right: 6px;
-
-  @media $portraitTablet {
-    display: none;
-  }
-}
-
-.mobileOnly + .hasBullets::before {
+.tag + .hasBullets::before {
   content: none;
 }

package/src/MetaItem/MetaItem.types.ts

@@ -2,6 +2,6 @@ export interface MetaItemProps {
   bullets?: boolean
   hasSource?: boolean
   type?: string
-  mobileOnly?: boolean
+  variant?: 'tag'
   children: React.ReactNode | JSX.Element[] | JSX.Element
 }

package/src/MetaItem/index.tsx

@@ -8,14 +8,14 @@ export const MetaItem: React.FC<MetaItemProps> = ({
   type,
   children,
   bullets,
-  mobileOnly
+  variant
 }) => {
   const classNames = [
     [styles.root, true],
     [styles[type], !!type && !!styles[type]],
     [styles.hasSource, !!hasSource],
     [styles.hasBullets, !!bullets],
-    [styles.mobileOnly, !!mobileOnly]
+    [styles[variant], !!variant && !!styles[variant]]
   ]
 
   return (

package/src/MetaItemLive/MetaItemLive.module.css

@@ -1,10 +1,9 @@
 .root {
   position: relative;
 
-  display: inline-block;
-
-  width: 18px;
-  height: 18px;
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
 
   vertical-align: middle;
 }
@@ -13,109 +12,35 @@
   color: $gold;
 }
 
-.root::before,
-.root::after,
-.frame {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-}
-
-.root {
-  margin-top: -4px;
-  margin-right: 1px;
-
-  transform: translateY(1px);
-}
-
-.root::before,
-.root::after,
-.frame {
-
-  border-radius: 50%;
-  transform: scale(0);
-
-  animation-duration: 1.05s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-.frame {
-
-  background: currentColor;
-
-  animation-name: liveMiddle;
-}
-
-.root::before,
-.root::after {
+.icon {
+  width: 10px;
+  height: 10px;
+  margin-top: -1px;
 
-  border: 1px solid currentColor;
+  background-color: #ff4e4e;
+  border-radius: 5px;
 
-  content: '';
+  animation: pulse 2s infinite ease-out;
 }
 
-.root::before {
-  animation-name: liveFirstWave;
-}
-
-.root::after {
-  animation-name: liveSecondWave;
-}
-
-@keyframes liveMiddle {
-  14% {
-    transform: scale(0);
-  }
-
-  30% {
-    transform: scale(0.22);
-  }
-
-  63% {
-    transform: scale(0.22);
-  }
-
-  70% {
-    transform: scale(0);
-  }
-
-  100% {
-    transform: scale(0);
-  }
+.text {
+  color: #ff4e4e;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
 }
 
-@keyframes liveFirstWave {
-  21% {
-    transform: scale(0.1);
-  }
-
-  53% {
-    transform: scale(0.33);
+@keyframes pulse {
+  0% {
+    opacity: 1;
   }
 
-  100% {
-    transform: scale(0.66);
-
+  50% {
     opacity: 0;
   }
-}
-
-@keyframes liveSecondWave {
-  21% {
-    transform: scale(0.22);
-  }
-
-  53% {
-    transform: scale(0.55);
-  }
 
   100% {
-    transform: scale(0.88);
-
-    opacity: 0;
+    opacity: 1;
   }
 }

package/src/MetaItemLive/MetaItemLive.types.ts

@@ -1,3 +1,4 @@
 export interface MetaItemLiveProps {
   theme?: 'gold' | 'light' | 'inherit'
+  children?: React.ReactNode
 }

package/src/MetaItemLive/index.tsx

@@ -4,7 +4,8 @@ import { makeClassName } from '../utils/makeClassName'
 import styles from './MetaItemLive.module.css'
 
 export const MetaItemLive: React.FC<MetaItemLiveProps> = ({
-  theme = 'gold'
+  theme = 'gold',
+  children
 }) => {
   const classNames = [
     [styles.root, true],
@@ -17,7 +18,9 @@ export const MetaItemLive: React.FC<MetaItemLiveProps> = ({
       data-meta="live"
       className={makeClassName(classNames)}
     >
-      <div className={styles.frame} />
+      <div className={styles.icon} />
+
+      {children && <span className={styles.text}>{children}</span>}
     </div>
   )
 }

package/src/RichTitle/RichTitle.module.css

@@ -78,6 +78,8 @@
 
 .isInFeaturedBlock {
   @media $landscapeTabletMax {
+    margin-bottom: 16px;
+
     font-size: 22px;
     line-height: 110%;
   }

package/src/Tag/Tag.module.css

@@ -105,6 +105,8 @@
 }
 
 .isInBlockMetaContainer {
+  margin-top: -1px;
+
   line-height: 15px;
 }