@meduza/ui-kit-2 0.8.626 → 0.8.628

package/dist/ui-kit-game.css

@@ -2345,24 +2345,21 @@
   background-color: #4f4f4f;
 }
 
-.Meta-module_containerInDynamicBlock__YSh66 {
+/* .containerInDynamicBlock {
   position: absolute;
   bottom: 20px;
   left: 57px;
   width: auto;
-}
+} */
 
-.Meta-module_containerInDynamicBlockAndMaterial__4v4A9 {
+/* .containerInDynamicBlockAndMaterial {
   left: 65px;
-}
 
-@media only screen and (min-width: 40.625em) {
-
-.Meta-module_containerInDynamicBlockAndMaterial__4v4A9 {
+  @media $landscapeTablet {
     left: auto;
     bottom: 35px;
-}
   }
+} */
 
 .Meta-module_root__H-Q4d {
   font-size: 12px;
@@ -3300,7 +3297,7 @@
 
 @media only screen and (min-width: 40.625em) {
 
-.RichTitle-module_rootEpisodeInMaterial__SRFt0 {
+.RichTitle-module_root__U5XQu.RichTitle-module_episodeInMaterial__pp-Wt {
     font-size: 37px;
     line-height: 42px;
 }
@@ -3308,7 +3305,7 @@
 
 @media only screen and (min-width: 40.625em) {
 
-.RichTitle-module_rootEpisodeInEmbed__er5hq {
+.RichTitle-module_root__U5XQu.RichTitle-module_episodeInEmbed__gJpJL {
     font-size: 1.3rem;
     line-height: 1.6rem;
 }

package/dist/ui-kit.css

@@ -2345,24 +2345,21 @@
   background-color: #4f4f4f;
 }
 
-.Meta-module_containerInDynamicBlock__YSh66 {
+/* .containerInDynamicBlock {
   position: absolute;
   bottom: 20px;
   left: 57px;
   width: auto;
-}
+} */
 
-.Meta-module_containerInDynamicBlockAndMaterial__4v4A9 {
+/* .containerInDynamicBlockAndMaterial {
   left: 65px;
-}
 
-@media only screen and (min-width: 64em) {
-
-.Meta-module_containerInDynamicBlockAndMaterial__4v4A9 {
+  @media $landscapeTablet {
     left: auto;
     bottom: 35px;
-}
   }
+} */
 
 .Meta-module_root__H-Q4d {
   font-size: 12px;
@@ -3300,7 +3297,7 @@
 
 @media only screen and (min-width: 48em) {
 
-.RichTitle-module_rootEpisodeInMaterial__SRFt0 {
+.RichTitle-module_root__U5XQu.RichTitle-module_episodeInMaterial__pp-Wt {
     font-size: 37px;
     line-height: 42px;
 }
@@ -3308,7 +3305,7 @@
 
 @media only screen and (min-width: 64em) {
 
-.RichTitle-module_rootEpisodeInEmbed__er5hq {
+.RichTitle-module_root__U5XQu.RichTitle-module_episodeInEmbed__gJpJL {
     font-size: 1.3rem;
     line-height: 1.6rem;
 }

package/package.json

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

package/src/Meta/Meta.module.css

@@ -1,18 +1,18 @@
-.containerInDynamicBlock {
+/* .containerInDynamicBlock {
   position: absolute;
   bottom: 20px;
   left: 57px;
   width: auto;
-}
+} */
 
-.containerInDynamicBlockAndMaterial {
+/* .containerInDynamicBlockAndMaterial {
   left: 65px;
 
   @media $landscapeTablet {
     left: auto;
     bottom: 35px;
   }
-}
+} */
 
 .root {
   font-size: 12px;

package/src/Meta/MetaContainer.tsx

@@ -9,7 +9,7 @@ import { DocumentItemsCount } from '../DocumentItemsCount'
 import { BookmarkButton } from '../BookmarkButton'
 import { Timestamp } from '../Timestamp'
 import { SvgSymbol } from '../SvgSymbol'
-import { makeClassName, ClassNames } from '../utils/makeClassName'
+// import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import { TimestampProps } from '../Timestamp/Timestamp.types'
 
@@ -25,8 +25,8 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
   block: {
     data: { components, theme }
   },
-  styleContext,
-  type
+  styleContext
+  // type
 }) => {
   const themeColor =
     styleContext && styleContext.indexOf('dark') !== -1 ? 'light' : 'unset'
@@ -43,155 +43,155 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
 
   const hasSource = !!components.find((item) => item.type === 'source_name')
 
-  const classNames: ClassNames = [
-    [
-      styles.containerInDynamicBlock,
-      styleContext === 'isInDynamicBlock' || styleContext.includes('episode')
-    ],
-    [
-      styles.containerInDynamicBlockAndMaterial,
-      styleContext === 'isInDynamicBlock' && type === 'isInMaterial'
-    ]
-  ]
+  // const classNames: ClassNames = [
+  //   [
+  //     styles.containerInDynamicBlock,
+  //     styleContext === 'isInDynamicBlock' || styleContext.includes('episode')
+  //   ],
+  //   [
+  //     styles.containerInDynamicBlockAndMaterial,
+  //     styleContext === 'isInDynamicBlock' && type === 'isInMaterial'
+  //   ]
+  // ]
 
   return (
-    <div className={makeClassName(classNames)}>
-      <Meta
-        styleContext={context}
-        theme={theme || themeColor}
-        onlyOn={block.only_on}
-        hasSource={hasSource}
-      >
-        {components.map((component) => {
-          switch (component.type) {
-            case 'source_name': {
-              return (
-                <MetaItem hasSource={hasSource} bullets key={component.id}>
-                  <>
-                    {lang === 'ru' ? 'Источник: ' : 'Source: '}
-                    {component.url && (
-                      <a
-                        href={component.url}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        {component.text}
-                      </a>
-                    )}
-                    {!component.url && component.text}
-                  </>
-                </MetaItem>
-              )
-            }
-            case 'duration': {
-              // if (styleContext === 'isInDynamicBlock') {
-              //   return (
-              //     <MetaItem hasSource={hasSource} bullets key={component.id}>
-              //       {component.text}
-              //     </MetaItem>
-              //   )
-              // }
-              return (
-                <MetaItem hasSource={hasSource} bullets key={component.id}>
-                  <>
-                    {styleContext !== 'isInDynamicBlock' && (
-                      <SvgSymbol icon="podcast" size="small" />
-                    )}
-                    {component.text}
-                  </>
-                </MetaItem>
-              )
-            }
-            case 'datetime': {
-              const format = ((component.format && toCamel(component.format)) ||
-                'date') as TimestampProps['type']
+    // <div className={makeClassName(classNames)}>
+    <Meta
+      styleContext={context}
+      theme={theme || themeColor}
+      onlyOn={block.only_on}
+      hasSource={hasSource}
+    >
+      {components.map((component) => {
+        switch (component.type) {
+          case 'source_name': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <>
+                  {lang === 'ru' ? 'Источник: ' : 'Source: '}
+                  {component.url && (
+                    <a
+                      href={component.url}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {component.text}
+                    </a>
+                  )}
+                  {!component.url && component.text}
+                </>
+              </MetaItem>
+            )
+          }
+          case 'duration': {
+            // if (styleContext === 'isInDynamicBlock') {
+            //   return (
+            //     <MetaItem hasSource={hasSource} bullets key={component.id}>
+            //       {component.text}
+            //     </MetaItem>
+            //   )
+            // }
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <>
+                  {styleContext !== 'isInDynamicBlock' && (
+                    <SvgSymbol icon="podcast" size="small" />
+                  )}
+                  {component.text}
+                </>
+              </MetaItem>
+            )
+          }
+          case 'datetime': {
+            const format = ((component.format && toCamel(component.format)) ||
+              'date') as TimestampProps['type']
 
-              return (
-                <MetaItem
-                  hasSource={hasSource}
-                  bullets
-                  key={component.id}
-                  type="datetime"
-                >
-                  <Timestamp
-                    publishedAt={component.datetime}
-                    // type={
-                    //   styleContext === 'isInDynamicBlock'
-                    //     ? 'fromNow'
-                    //     : format || 'date'
-                    // }
-                    type={format || 'date'}
-                    locale={lang}
-                  />
-                </MetaItem>
-              )
-            }
+            return (
+              <MetaItem
+                hasSource={hasSource}
+                bullets
+                key={component.id}
+                type="datetime"
+              >
+                <Timestamp
+                  publishedAt={component.datetime}
+                  // type={
+                  //   styleContext === 'isInDynamicBlock'
+                  //     ? 'fromNow'
+                  //     : format || 'date'
+                  // }
+                  type={format || 'date'}
+                  locale={lang}
+                />
+              </MetaItem>
+            )
+          }
 
-            case 'items_count': {
-              return (
-                <MetaItem hasSource={hasSource} bullets key={component.id}>
-                  <DocumentItemsCount
-                    items={component.count}
-                    type={isPodcast ? 'podcast' : 'card'}
-                    lang={lang}
-                  >
-                    <SvgSymbol icon="card" size="unset" />
-                  </DocumentItemsCount>
-                </MetaItem>
-              )
-            }
-            case 'broadcast_active': {
-              return (
-                <MetaItem hasSource={hasSource} bullets key={component.id}>
-                  <>
-                    <MetaItemLive /> Прямой эфир
-                  </>
-                </MetaItem>
-              )
-            }
-            case 'broadcast': {
-              return (
-                <MetaItem hasSource={hasSource} bullets key={component.id}>
-                  <>
-                    {component.with_icon && <MetaItemLive />}
+          case 'items_count': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <DocumentItemsCount
+                  items={component.count}
+                  type={isPodcast ? 'podcast' : 'card'}
+                  lang={lang}
+                >
+                  <SvgSymbol icon="card" size="unset" />
+                </DocumentItemsCount>
+              </MetaItem>
+            )
+          }
+          case 'broadcast_active': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <>
+                  <MetaItemLive /> Прямой эфир
+                </>
+              </MetaItem>
+            )
+          }
+          case 'broadcast': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <>
+                  {component.with_icon && <MetaItemLive />}
 
-                    {component.label}
-                  </>
-                </MetaItem>
-              )
-            }
-            case 'string': {
-              return (
-                <MetaItem hasSource={hasSource} bullets key={component.id}>
-                  {component.text}
-                </MetaItem>
-              )
-            }
+                  {component.label}
+                </>
+              </MetaItem>
+            )
+          }
+          case 'string': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                {component.text}
+              </MetaItem>
+            )
+          }
 
-            default: {
-              return null
-            }
+          default: {
+            return null
           }
-        })}
-        {(isRead || isListened) && (
-          <MetaItem
-            hasSource={hasSource}
-            bullets
-            type={isListened ? 'listened' : 'read'}
-          >
-            <SvgSymbol icon={isListened ? 'listened' : 'read'} size="unset" />
-          </MetaItem>
-        )}
+        }
+      })}
+      {(isRead || isListened) && (
+        <MetaItem
+          hasSource={hasSource}
+          bullets
+          type={isListened ? 'listened' : 'read'}
+        >
+          <SvgSymbol icon={isListened ? 'listened' : 'read'} size="unset" />
+        </MetaItem>
+      )}
 
-        {isSlides && lang === 'ru' && (
-          <div className={styles.bookmark}>
-            <BookmarkButton
-              isInBookmarks={isInBookmarks}
-              onClick={(): void => bookmarkAction('bookmark', 'top')}
-            />
-          </div>
-        )}
-      </Meta>
-    </div>
+      {isSlides && lang === 'ru' && (
+        <div className={styles.bookmark}>
+          <BookmarkButton
+            isInBookmarks={isInBookmarks}
+            onClick={(): void => bookmarkAction('bookmark', 'top')}
+          />
+        </div>
+      )}
+    </Meta>
+    // </div>
   )
 }

package/src/RichTitle/RichTitle.module.css

@@ -122,14 +122,14 @@
   }
 }
 
-.rootEpisodeInMaterial {
+.root.episodeInMaterial {
   @media $portraitTablet {
     font-size: 37px;
     line-height: 42px;
   }
 }
 
-.rootEpisodeInEmbed {
+.root.episodeInEmbed {
   @media $landscapeTablet {
     font-size: 1.3rem;
     line-height: 1.6rem;

package/src/RichTitle/index.tsx

@@ -17,8 +17,8 @@ export const RichTitle: React.FC<RichTitleProps> = ({
     [styles.root, true],
     [styles[onlyOn], true],
     [styles.featured, !!featured],
-    [styles.rootEpisodeInMaterial, type === 'isInMaterial'],
-    [styles.rootEpisodeInEmbed, type === 'isEmbeded']
+    [styles.episodeInMaterial, type === 'isInMaterial'],
+    [styles.episodeInEmbed, type === 'isEmbeded']
   ]
 
   if (styleContext) {