@meduza/ui-kit-2 0.8.602 → 0.8.604

package/dist/ui-kit-game.css

@@ -2335,6 +2335,16 @@
   background-color: #4f4f4f;
 }
 
+.Meta-module_containerInDynamicBlock__YSh66 {
+  position: absolute;
+  bottom: 20px;
+  left: 57px;
+}
+
+.Meta-module_containerInDynamicBlockAndMaterial__4v4A9 {
+  left: 65px;
+}
+
 .Meta-module_root__H-Q4d {
   font-size: 12px;
 
@@ -2346,12 +2356,6 @@
   fill: inherit;
 }
 
-.Meta-module_isInDynamicBlock__iuEI0 {
-  position: absolute;
-  bottom: 20px;
-  left: 54px;
-}
-
 .Meta-module_rich__dCkJK,
 .Meta-module_podcast__MI8gD,
 .Meta-module_episode__0n9CF,

package/dist/ui-kit.css

@@ -2335,6 +2335,16 @@
   background-color: #4f4f4f;
 }
 
+.Meta-module_containerInDynamicBlock__YSh66 {
+  position: absolute;
+  bottom: 20px;
+  left: 57px;
+}
+
+.Meta-module_containerInDynamicBlockAndMaterial__4v4A9 {
+  left: 65px;
+}
+
 .Meta-module_root__H-Q4d {
   font-size: 12px;
 
@@ -2346,12 +2356,6 @@
   fill: inherit;
 }
 
-.Meta-module_isInDynamicBlock__iuEI0 {
-  position: absolute;
-  bottom: 20px;
-  left: 54px;
-}
-
 .Meta-module_rich__dCkJK,
 .Meta-module_podcast__MI8gD,
 .Meta-module_episode__0n9CF,

package/package.json

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

package/src/Meta/Meta.module.css

@@ -1,3 +1,13 @@
+.containerInDynamicBlock {
+  position: absolute;
+  bottom: 20px;
+  left: 57px;
+}
+
+.containerInDynamicBlockAndMaterial {
+  left: 65px;
+}
+
 .root {
   font-size: 12px;
 
@@ -9,12 +19,6 @@
   fill: inherit;
 }
 
-.isInDynamicBlock {
-  position: absolute;
-  bottom: 20px;
-  left: 54px;
-}
-
 .rich,
 .podcast,
 .episode,

package/src/Meta/Meta.types.ts

@@ -10,6 +10,7 @@ export interface MetaContainerProps {
   bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: () => void
   lang: 'ru' | 'en'
+  type?: any
 }
 
 export interface MetaProps {
@@ -18,5 +19,4 @@ export interface MetaProps {
   hasSource?: boolean
   theme?: string
   children: React.ReactNode
-  type: string[] | string
 }

package/src/Meta/MetaContainer.tsx

@@ -9,6 +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 { TimestampProps } from '../Timestamp/Timestamp.types'
 
@@ -24,7 +25,8 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
   block: {
     data: { components, theme }
   },
-  styleContext
+  styleContext,
+  type
 }) => {
   const themeColor =
     styleContext && styleContext.indexOf('dark') !== -1 ? 'light' : 'unset'
@@ -41,140 +43,149 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
 
   const hasSource = !!components.find((item) => item.type === 'source_name')
 
+  const classNames: ClassNames = [
+    [styles.containerInDynamicBlock, styleContext === 'isInDynamicBlock'],
+    [
+      styles.containerInDynamicBlockAndMaterial,
+      styleContext === 'isInDynamicBlock' && type === 'isInMaterial'
+    ]
+  ]
+
   return (
-    <Meta
-      styleContext={context}
-      theme={theme || themeColor}
-      onlyOn={block.only_on}
-      hasSource={hasSource}
-      type={styleContext}
-    >
-      {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') {
+    <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}>
-                  {component.text}
+                  <>
+                    {lang === 'ru' ? 'Источник: ' : 'Source: '}
+                    {component.url && (
+                      <a
+                        href={component.url}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        {component.text}
+                      </a>
+                    )}
+                    {!component.url && component.text}
+                  </>
                 </MetaItem>
               )
             }
-            return (
-              <MetaItem hasSource={hasSource} bullets key={component.id}>
-                <>
-                  <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'
-                  }
-                  locale={lang}
-                />
-              </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}>
+                  <>
+                    <SvgSymbol icon="podcast" size="small" />
+                    {component.text}
+                  </>
+                </MetaItem>
+              )
+            }
+            case 'datetime': {
+              const format = ((component.format && toCamel(component.format)) ||
+                'date') as TimestampProps['type']
 
-          case 'items_count': {
-            return (
-              <MetaItem hasSource={hasSource} bullets key={component.id}>
-                <DocumentItemsCount
-                  items={component.count}
-                  type={isPodcast ? 'podcast' : 'card'}
-                  lang={lang}
+              return (
+                <MetaItem
+                  hasSource={hasSource}
+                  bullets
+                  key={component.id}
+                  type="datetime"
                 >
-                  <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 />}
+                  <Timestamp
+                    publishedAt={component.datetime}
+                    type={
+                      styleContext === 'isInDynamicBlock'
+                        ? 'fromNow'
+                        : format || 'date'
+                    }
+                    locale={lang}
+                  />
+                </MetaItem>
+              )
+            }
 
-                  {component.label}
-                </>
-              </MetaItem>
-            )
-          }
-          case 'string': {
-            return (
-              <MetaItem hasSource={hasSource} bullets key={component.id}>
-                {component.text}
-              </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 />}
 
-          default: {
-            return null
+                    {component.label}
+                  </>
+                </MetaItem>
+              )
+            }
+            case 'string': {
+              return (
+                <MetaItem hasSource={hasSource} bullets key={component.id}>
+                  {component.text}
+                </MetaItem>
+              )
+            }
+
+            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>
+        {isSlides && lang === 'ru' && (
+          <div className={styles.bookmark}>
+            <BookmarkButton
+              isInBookmarks={isInBookmarks}
+              onClick={(): void => bookmarkAction('bookmark', 'top')}
+            />
+          </div>
+        )}
+      </Meta>
+    </div>
   )
 }

package/src/Meta/index.tsx

@@ -10,15 +10,13 @@ export const Meta: React.FC<MetaProps> = ({
   theme,
   children,
   onlyOn,
-  styleContext,
-  type
+  styleContext
 }) => {
   let classNames: ClassNames = [
     [styles.root, true],
     [styles[theme], !!theme && !!styles[theme]],
     [styles[onlyOn], !!onlyOn],
-    [styles.hasSource, hasSource],
-    [styles.isInDynamicBlock, type === 'isInDynamicBlock']
+    [styles.hasSource, hasSource]
   ]
 
   if (styleContext) {

package/src/RawHtmlBlock/RawHtmlBlock.types.ts

@@ -17,4 +17,5 @@ export interface RawHtmlBlockProps {
   bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: LightboxContext | null | undefined
   lang?: 'ru' | 'en'
+  type?: any
 }

package/src/RawHtmlBlock/index.tsx

@@ -18,7 +18,8 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
   isInBookmarks,
   bookmarkAction,
   lightBox,
-  lang
+  lang,
+  type = 'default'
 }) => {
   const context = {
     lightBox: lightBox || null
@@ -68,6 +69,7 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
             isInBookmarks={isInBookmarks}
             bookmarkAction={bookmarkAction}
             lang={lang}
+            type={type}
           />
         </BlockProvider>
       )

package/src/RenderBlocks/RenderBlocks.types.ts

@@ -10,4 +10,5 @@ export interface RenderBlocksProps {
   bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: LightboxContext | null | undefined
   lang?: 'ru' | 'en'
+  type?: any
 }

package/src/RenderBlocks/index.tsx

@@ -27,7 +27,8 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
   isRead,
   isListened,
   bookmarkAction,
-  isInBookmarks
+  isInBookmarks,
+  type = 'default'
 }) => {
   switch (block.type) {
     case 'tag': {
@@ -61,6 +62,7 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
           isListened={isListened}
           isInBookmarks={isInBookmarks}
           bookmarkAction={bookmarkAction}
+          type={type}
         />
       )
     }