@meduza/ui-kit-2 1.1.3 → 1.3.0

package/src/Meta/MetaContainer.tsx

@@ -6,21 +6,13 @@ import { Meta } from './'
 import { MetaItem } from '../MetaItem'
 import { MetaItemLive } from '../MetaItemLive'
 import { DocumentItemsCount } from '../DocumentItemsCount'
-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> = ({
   lang,
   block,
-  isRead,
-  isListened,
-  bookmarkAction,
-  isInBookmarks,
   block: {
     data: { components, theme }
   },
@@ -29,7 +21,6 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
   const themeColor =
     styleContext && styleContext.indexOf('dark') !== -1 ? 'light' : 'unset'
   const isPodcast = styleContext && styleContext.indexOf('podcast') !== -1
-  const isSlides = styleContext && styleContext.indexOf('slide') !== -1
 
   let context = []
 
@@ -72,12 +63,7 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
           case 'duration': {
             return (
               <MetaItem hasSource={hasSource} bullets key={component.id}>
-                <>
-                  {styleContext !== 'isInDynamicBlock' && (
-                    <SvgSymbol icon="podcast" size="small" />
-                  )}
-                  {component.text}
-                </>
+                {component.text}
               </MetaItem>
             )
           }
@@ -108,29 +94,22 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
                   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 /> Прямой эфир
-                </>
+                <MetaItemLive>Прямой эфир</MetaItemLive>
               </MetaItem>
             )
           }
           case 'broadcast': {
             return (
               <MetaItem hasSource={hasSource} bullets key={component.id}>
-                <>
-                  {component.with_icon && <MetaItemLive />}
-
-                  {component.label}
-                </>
+                {component.with_icon && <MetaItemLive />}
+                {component.label}
               </MetaItem>
             )
           }
@@ -147,24 +126,6 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
           }
         }
       })}
-      {(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>
   )
 }

package/src/MetaItem/MetaItem.module.css

@@ -1,7 +1,7 @@
 .root {
   display: inline;
 
-  margin-right: 15px;
+  margin-right: 6px;
 }
 
 .root > svg {
@@ -9,21 +9,21 @@
 
   margin-right: 1px;
 
-  vertical-align: top;
-
   color: inherit;
 
+  vertical-align: top;
+
   fill: currentColor;
 }
 
 .root a {
   display: inline;
 
-  text-decoration: underline;
-
   color: inherit;
 
-  -webkit-text-decoration-skip: auto;
+  text-decoration: underline;
+
+  text-decoration-skip: auto;
 }
 
 .root a:hover {
@@ -67,16 +67,7 @@
   }
 }
 
-.hasSource.listened::before,
-.hasSource.read::before {
-  @media $mobileMax {
-    display: inline-block
-  }
-}
-
-.datetime,
-.listened,
-.read {
+.datetime {
   @media $mobileMax {
     width: auto;
   }
@@ -88,15 +79,6 @@
   }
 }
 
-.hasSource.listened,
-.hasSource.read {
-  @media $mobileMax {
-    order: -1;
-
-    margin-top: 0;
-  }
-}
-
-.read svg {
-  margin-top: -1px;
+.tag + .hasBullets::before {
+  content: none;
 }

package/src/MetaItem/MetaItem.types.ts

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

package/src/MetaItem/index.tsx

@@ -7,13 +7,15 @@ export const MetaItem: React.FC<MetaItemProps> = ({
   hasSource,
   type,
   children,
-  bullets
+  bullets,
+  variant
 }) => {
   const classNames = [
     [styles.root, true],
     [styles[type], !!type && !!styles[type]],
     [styles.hasSource, !!hasSource],
-    [styles.hasBullets, !!bullets]
+    [styles.hasBullets, !!bullets],
+    [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/RawHtmlBlock/RawHtmlBlock.types.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ImageProps } from '../Image/Image.types'
-import { CallToActions, LightboxContext } from '../types'
+import { LightboxContext } from '../types'
 
 export type lightBox = {
   show: (image?: ImageProps['optimized'], alt?: ImageProps['alt']) => void
@@ -11,10 +11,6 @@ export type lightBox = {
 export interface RawHtmlBlockProps {
   block: any
   styleContext?: string[] | string
-  isRead?: boolean | undefined
-  isListened?: boolean | undefined
-  isInBookmarks?: boolean | undefined
-  bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: LightboxContext | null | undefined
   lang?: 'ru' | 'en'
   platform?: 'website' | 'mirror'

package/src/RawHtmlBlock/index.tsx

@@ -13,10 +13,6 @@ import { RelatedBook } from '../RelatedBook'
 export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
   block,
   styleContext,
-  isRead,
-  isListened,
-  isInBookmarks,
-  bookmarkAction,
   lightBox,
   lang,
   platform
@@ -64,10 +60,6 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
           <RenderBlocks
             block={block}
             styleContext={styleContext}
-            isRead={isRead}
-            isListened={isListened}
-            isInBookmarks={isInBookmarks}
-            bookmarkAction={bookmarkAction}
             lang={lang}
             platform={platform}
           />

package/src/RawHtmlBlock/mock.json

@@ -371,8 +371,7 @@
     {
       "type": "share",
       "data": {
-        "share": true,
-        "bookmark": true
+        "share": true
       },
       "id": "18-c940481d7193bbdc8371aa0ed3bef69e5dea7f17e544f90b3a235abe69605cd8"
     }

package/src/RenderBlocks/RenderBlocks.types.ts

@@ -1,13 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { CallToActions, LightboxContext } from '../types'
+import { LightboxContext } from '../types'
 
 export interface RenderBlocksProps {
   block: any
   styleContext?: any
-  isRead?: boolean
-  isListened?: boolean
-  isInBookmarks?: boolean
-  bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: LightboxContext | null | undefined
   lang?: 'ru' | 'en'
   platform?: 'website' | 'mirror'

package/src/RenderBlocks/index.tsx

@@ -24,10 +24,6 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
   block,
   styleContext,
   lang,
-  isRead,
-  isListened,
-  bookmarkAction,
-  isInBookmarks,
   platform
 }) => {
   switch (block.type) {
@@ -58,10 +54,6 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
           block={block}
           lang={block.data.lang}
           styleContext={styleContext}
-          isRead={isRead}
-          isListened={isListened}
-          isInBookmarks={isInBookmarks}
-          bookmarkAction={bookmarkAction}
         />
       )
     }

package/src/RichTitle/RichTitle.module.css

@@ -59,7 +59,6 @@
 
 .featured {
   @media $landscapeTabletMax {
-
     font-size: 28px;
     line-height: 30px;
     letter-spacing: 0.3px;
@@ -77,6 +76,26 @@
   }
 }
 
+.isInFeaturedBlock {
+  @media $landscapeTabletMax {
+    margin-bottom: 16px;
+
+    font-size: 22px;
+    line-height: 110%;
+  }
+}
+
+.isInFeaturedBlock span {
+  @media $landscapeTabletMax {
+    display: block;
+
+    padding-top: 4px;
+
+    font-size: 18px;
+    line-height: 120%;
+  }
+}
+
 .isInMediaBlock {
   text-align: left;
 
@@ -107,9 +126,10 @@
   margin: 6px 0 20px;
 
   @media $landscapeTablet {
+    margin: 6px 0 18px;
+
     font-size: 27px;
     line-height: 32px;
-    margin: 6px 0 18px;
   }
 }
 
@@ -123,9 +143,10 @@
 }
 
 .root.isInPodcastPlayer {
+  margin: 0 0 20px;
+
   font-size: 19px;
   line-height: 23px;
-  margin: 0 0 20px;
 }
 
 .root.large {

package/src/SvgSymbol/SvgSymbol.module.css

@@ -71,9 +71,7 @@
 }
 
 .card,
-.podcast,
-.read,
-.listened {
+.podcast {
   width: 15px;
   height: 15px;
 }
@@ -198,29 +196,6 @@
   }
 }
 
-.bookmark {
-  cursor: pointer;
-
-  stroke-width: 2px;
-
-  @media $landscapeTablet {
-    stroke-width: 1.5px;
-  }
-}
-
-.shareBookmark {
-  width: 11px;
-  height: auto;
-
-  cursor: pointer;
-
-  stroke-width: 1.2px;
-}
-
-.isInToolbar.bookmark {
-  width: 14px;
-}
-
 .receipt {
   width: 10px;
   height: 13px;

package/src/SvgSymbol/SvgSymbol.stories.tsx

@@ -27,7 +27,7 @@ const podcast: Icons[] = [
   'speedTwo'
 ]
 
-const meta: Icons[] = ['card', 'podcast', 'read', 'listened']
+const meta: Icons[] = ['card', 'podcast']
 
 const other: Icons[] = [
   'meduzaLogo',
@@ -37,7 +37,6 @@ const other: Icons[] = [
   'cross',
   'link',
   'user',
-  'bookmark',
   'receipt'
 ]
 

package/src/SvgSymbol/SvgSymbol.types.ts

@@ -12,7 +12,6 @@ export type SvgSymbolStyleContexts =
   | 'PodcastMaterial'
   | 'isInHeader'
   | 'isInProfile'
-  | 'isInBookmark'
 
 export type Icons =
   | 'meduzaLogo'
@@ -29,14 +28,12 @@ export type Icons =
   | 'episodeDownload'
   | 'play'
   | 'pause'
-  | 'shareBookmark'
   | 'speedHalf'
   | 'speedThreeQuarters'
   | 'speedOne'
   | 'speedOneQuarter'
   | 'speedOneHalf'
   | 'speedTwo'
-  | 'podcastBookmark'
   | 'reaction'
   | 'cross'
   | 'link'
@@ -46,10 +43,7 @@ export type Icons =
   | 'arrow'
   | 'brent'
   | 'user'
-  | 'bookmark'
   | 'receipt'
-  | 'read'
-  | 'listened'
 
 export type Sizes = 'small' | 'normal' | 'medium' | 'large' | 'unset'
 

package/src/SvgSymbol/icons.ts

@@ -165,13 +165,6 @@ export const icons = {
               </g>`
   },
 
-  podcastBookmark: {
-    width: 25,
-    height: 27,
-    content:
-      '<path d="M12.5 27C19.404 27 25 21.404 25 14.5S19.404 2 12.5 2 0 7.596 0 14.5 5.596 27 12.5 27zm0-1.5c-6.075 0-11-4.925-11-11s4.925-11 11-11 11 4.925 11 11-4.925 11-11 11z" /> <path d="M17.071 8.25H8a.75.75 0 00-.75.75v11.545l.007.104a.75.75 0 001.228.468l4.05-3.437 4.051 3.437a.75.75 0 001.235-.572V9a.75.75 0 00-.75-.75zm-.75 1.499v9.176l-3.3-2.8-.098-.07a.75.75 0 00-.873.07l-3.3 2.799V9.749h7.571z" data-stroke="true" /> <path d="M17.071 8.25H8a.75.75 0 00-.75.75v11.545l.007.104a.75.75 0 001.228.468l4.05-3.437 4.051 3.437a.75.75 0 001.235-.572V9a.75.75 0 00-.75-.75z" data-fill="true" />'
-  },
-
   reaction: {
     width: 16,
     height: 16,
@@ -235,20 +228,6 @@ export const icons = {
       '<path fill="currentColor" fill-rule="nonzero" d="M8 1a4.25 4.25 0 012.676 7.552 6.751 6.751 0 014.074 6.198.75.75 0 11-1.5 0 5.25 5.25 0 00-10.5 0 .75.75 0 11-1.5 0 6.752 6.752 0 014.074-6.199A4.25 4.25 0 018 1zm0 1.5A2.75 2.75 0 108 8a2.75 2.75 0 000-5.5z" />'
   },
 
-  bookmark: {
-    width: 30,
-    height: 30,
-    content:
-      '<g opacity="1"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 21.8237C24 22.847 24 23.3587 23.7885 23.6299C23.6043 23.8659 23.3242 24.007 23.025 24.0145C22.6811 24.0231 22.27 23.7185 21.4476 23.1094L15.9524 19.0388C15.6105 18.7856 15.4396 18.659 15.2523 18.6101C15.0869 18.567 14.9131 18.567 14.7477 18.6101C14.5604 18.659 14.3895 18.7856 14.0476 19.0388L8.55236 23.1094C7.73003 23.7185 7.31886 24.0231 6.97505 24.0145C6.67581 24.007 6.39566 23.8659 6.21155 23.6299C6 23.3587 6 22.847 6 21.8237V6.6C6 6.03995 6 5.75992 6.10899 5.54601C6.20487 5.35785 6.35785 5.20487 6.54601 5.10899C6.75992 5 7.03995 5 7.6 5H22.4C22.9601 5 23.2401 5 23.454 5.10899C23.6422 5.20487 23.7951 5.35785 23.891 5.54601C24 5.75992 24 6.03995 24 6.6V21.8237Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g>'
-  },
-
-  shareBookmark: {
-    width: 11,
-    height: 15,
-    content:
-      '<path clip-rule="evenodd" d="M10 14 5.5 9.667 1 14V1h9v13Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>'
-  },
-
   receipt: {
     width: 10,
     height: 13,
@@ -256,18 +235,6 @@ export const icons = {
       '<g fill="currentColor" fill-rule="nonzero"><path d="M10 0H0v13l2-1.74 1.5 1.305L5 11.26l1.5 1.305L8 11.26 10 13V0zM9 .997v9.81l-1-.87-1.5 1.304L5 9.937 3.5 11.24 2 9.937l-1 .87V.996h8z"/><path d="M7 3v1H3V3zM7 6v1H3V6z"/></g>'
   },
 
-  read: {
-    width: 15,
-    height: 15,
-    content:
-      '<g fill="none" fill-rule="evenodd"><path opacity=".98" d="M0 0h15v15H0z"/><path d="M13.085 1.694a.513.513 0 01.855.56l-.051.077-3.163 3.975a.514.514 0 01-.73.075l-.068-.069-1.812-2.208a.512.512 0 01.729-.716l.065.066 1.409 1.718 2.766-3.478z" fill="#6EAC65" fill-rule="nonzero"/><path d="M6.454 12.997l-.06-.01-.078-.023a.49.49 0 01-.266-.24l.011.015a2.349 2.349 0 00-.535-.607c-.89-.745-2.117-.917-3.813-.12a.5.5 0 01-.706-.37L1 11.558V4.568a.5.5 0 01.287-.453c2.053-.963 3.695-.733 4.88.26.327.272.556.548.698.77l.084.144.018.04.022.076.01.071L7 11.233l.126-.09c.95-.656 2.16-.857 3.608-.417l.266.087v-2.81a.5.5 0 01.41-.491l.09-.008a.5.5 0 01.492.41l.008.09v3.555a.5.5 0 01-.713.452c-1.696-.796-2.922-.624-3.813.12a2.533 2.533 0 00-.497.544l-.038.064a.486.486 0 01-.485.258zm-4.29-8.17L2 4.892v5.92c1.637-.572 2.977-.348 4 .42l.002-5.58a2.605 2.605 0 00-.476-.513c-.81-.677-1.897-.88-3.362-.314z" fill="currentColor" fill-rule="nonzero"/></g>'
-  },
-  listened: {
-    width: 15,
-    height: 15,
-    content:
-      '<g fill-rule="nonzero"><path d="M4.978 4.354a.5.5 0 01-.332.624c-1.197.367-2.064 1.527-2.14 2.897l-.005.167a.749.749 0 01.999.708v3a.75.75 0 01-1.458.248L2 12a1 1 0 01-1-1v-1a1 1 0 01.5-.866V8.072c0-1.886 1.172-3.535 2.854-4.05a.5.5 0 01.624.332zM10 7a.5.5 0 01.492.41l.008.09.001 1.634a1 1 0 01.492.745L11 10v1a1 1 0 01-.883.993L10 12l-.042-.002a.75.75 0 01-1.451-.146L8.5 11.75v-3a.75.75 0 011.001-.707L9.5 7.5l.008-.09A.5.5 0 0110 7z" fill="currentColor" /><path d="M11.585 1.194a.513.513 0 01.855.56l-.051.077-3.163 3.975a.514.514 0 01-.73.075l-.068-.069-1.812-2.208a.512.512 0 01.729-.716l.065.066 1.409 1.718 2.766-3.478z" fill="#6EAC65" /></g>'
-  },
   magic: {
     width: 15,
     height: 15,