@meduza/ui-kit-2 0.8.693 → 0.8.702

package/dist/ui-kit-game.css

@@ -242,13 +242,6 @@
 }
   }
 
-.Button-module_isInToolbar__84SG- {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .Button-module_isInSpoiler__pGp-w svg {
   margin-top: -2px;
   margin-left: 6px;
@@ -519,6 +512,9 @@
   }
 
 .SvgSymbol-module_bookmark__JPKyG {
+  width: 17px;
+  height: auto;
+
   cursor: pointer;
 
   stroke-width: 2px;
@@ -527,6 +523,8 @@
 @media only screen and (min-width: 40.625em) {
 
 .SvgSymbol-module_bookmark__JPKyG {
+    width: 14px;
+
     stroke-width: 1.5px;
 }
   }
@@ -759,12 +757,6 @@
   height: 100%;
 }
 
-.Image-module_root__H5wAh.Image-module_fullRatio__q7QPa img {
-  position: static;
-  width: 100%;
-  height: 100%;
-}
-
 .Image-module_isStatic__TmQ1V img {
   position: relative;
   max-height: 160px;
@@ -1368,24 +1360,6 @@
 }
   }
 
-.Tag-module_isInDynamicBlock__WNleF {
-  opacity: 0.5;
-}
-
-.Tag-module_isInPodcastPlayer__H4sK9 {
-  font-size: 12px;
-  line-height: 12px;
-  opacity: 1;
-  margin-bottom: 6px;
-}
-
-@media only screen and (min-width: 32em) {
-
-.Tag-module_isInPodcastPlayer__H4sK9 {
-    margin-bottom: 6px;
-}
-  }
-
 @media only screen and (min-width: 32em) {
 
 .Tag-module_mobile__19oMH {
@@ -2098,7 +2072,6 @@
   }
 
 .Dropdown-module_root__Wv7S- {
-  width: 100%;
   position: relative;
   z-index: auto;
 
@@ -2167,16 +2140,23 @@
 .Dropdown-module_isInAudioPanel__UniSV .Dropdown-module_menu__11IQL {
   right: 0;
   left: auto;
-  transform: translate(-50%, -100%);
 }
 
+@media only screen and (min-width: 40.625em) {
+
+.Dropdown-module_isInAudioPanel__UniSV .Dropdown-module_menu__11IQL {
+    right: auto;
+    left: 0;
+}
+  }
+
 .Dropdown-module_isInAudioPanel__UniSV .Dropdown-module_menu__11IQL ul {
   width: 162px;
 }
 
 .Dropdown-module_menu__11IQL {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   top: 100%;
   left: 0;
 
@@ -2393,7 +2373,6 @@
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  justify-content: center;
 
   text-align: center;
 }
@@ -2766,22 +2745,22 @@
   position: relative;
 }
 
-.EmbedBlock-module_wrapper__ynT7R.EmbedBlock-module_isProportional__x8-8g {
+.EmbedBlock-module_wrapper__ynT7R .EmbedBlock-module_objectWrap__qpbni {
+  position: static;
+}
+
+.EmbedBlock-module_isYoutube__WpBkS {
   width: 100%;
   max-height: 70vh;
 }
 
 @media only screen and (min-width: 40.625em) {
 
-.EmbedBlock-module_wrapper__ynT7R.EmbedBlock-module_isProportional__x8-8g {
+.EmbedBlock-module_isYoutube__WpBkS {
     max-height: 90vh;
 }
   }
 
-.EmbedBlock-module_wrapper__ynT7R .EmbedBlock-module_objectWrap__qpbni {
-  position: static;
-}
-
 /* DEVICES */
 
 @media only screen and (min-width: 32em) {
@@ -3267,40 +3246,6 @@
 }
   }
 
-.RichTitle-module_root__U5XQu.RichTitle-module_isInDynamicBlock__J-gM6 {
-  margin: 0 0 28px;
-}
-
-@media only screen and (min-width: 40.625em) {
-
-.RichTitle-module_root__U5XQu.RichTitle-module_isInDynamicBlock__J-gM6 {
-    font-size: 37px;
-    line-height: 42px;
-}
-  }
-
-.RichTitle-module_root__U5XQu.RichTitle-module_isInPodcastPlayer__kvEPH {
-  font-size: 19px;
-  line-height: 23px;
-  margin: 0 0 20px;
-}
-
-@media only screen and (min-width: 40.625em) {
-
-.RichTitle-module_root__U5XQu.RichTitle-module_large__n2URP {
-    font-size: 37px;
-    line-height: 42px;
-}
-  }
-
-@media only screen and (min-width: 40.625em) {
-
-.RichTitle-module_root__U5XQu.RichTitle-module_medium__KkBLJ {
-    font-size: 1.3rem;
-    line-height: 1.6rem;
-}
-  }
-
 @media only screen and (min-width: 32em) {
 
 .RichTitle-module_mobile__W5L9E {

package/dist/ui-kit.css

@@ -242,13 +242,6 @@
 }
   }
 
-.Button-module_isInToolbar__84SG- {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .Button-module_isInSpoiler__pGp-w svg {
   margin-top: -2px;
   margin-left: 6px;
@@ -519,6 +512,9 @@
   }
 
 .SvgSymbol-module_bookmark__JPKyG {
+  width: 17px;
+  height: auto;
+
   cursor: pointer;
 
   stroke-width: 2px;
@@ -527,6 +523,8 @@
 @media only screen and (min-width: 64em) {
 
 .SvgSymbol-module_bookmark__JPKyG {
+    width: 14px;
+
     stroke-width: 1.5px;
 }
   }
@@ -759,12 +757,6 @@
   height: 100%;
 }
 
-.Image-module_root__H5wAh.Image-module_fullRatio__q7QPa img {
-  position: static;
-  width: 100%;
-  height: 100%;
-}
-
 .Image-module_isStatic__TmQ1V img {
   position: relative;
   max-height: 160px;
@@ -1368,24 +1360,6 @@
 }
   }
 
-.Tag-module_isInDynamicBlock__WNleF {
-  opacity: 0.5;
-}
-
-.Tag-module_isInPodcastPlayer__H4sK9 {
-  font-size: 12px;
-  line-height: 12px;
-  opacity: 1;
-  margin-bottom: 6px;
-}
-
-@media only screen and (min-width: 32em) {
-
-.Tag-module_isInPodcastPlayer__H4sK9 {
-    margin-bottom: 6px;
-}
-  }
-
 @media only screen and (min-width: 32em) {
 
 .Tag-module_mobile__19oMH {
@@ -2098,7 +2072,6 @@
   }
 
 .Dropdown-module_root__Wv7S- {
-  width: 100%;
   position: relative;
   z-index: auto;
 
@@ -2167,16 +2140,23 @@
 .Dropdown-module_isInAudioPanel__UniSV .Dropdown-module_menu__11IQL {
   right: 0;
   left: auto;
-  transform: translate(-50%, -100%);
 }
 
+@media only screen and (min-width: 64em) {
+
+.Dropdown-module_isInAudioPanel__UniSV .Dropdown-module_menu__11IQL {
+    right: auto;
+    left: 0;
+}
+  }
+
 .Dropdown-module_isInAudioPanel__UniSV .Dropdown-module_menu__11IQL ul {
   width: 162px;
 }
 
 .Dropdown-module_menu__11IQL {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   top: 100%;
   left: 0;
 
@@ -2393,7 +2373,6 @@
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  justify-content: center;
 
   text-align: center;
 }
@@ -2766,22 +2745,22 @@
   position: relative;
 }
 
-.EmbedBlock-module_wrapper__ynT7R.EmbedBlock-module_isProportional__x8-8g {
+.EmbedBlock-module_wrapper__ynT7R .EmbedBlock-module_objectWrap__qpbni {
+  position: static;
+}
+
+.EmbedBlock-module_isYoutube__WpBkS {
   width: 100%;
   max-height: 70vh;
 }
 
 @media only screen and (min-width: 64em) {
 
-.EmbedBlock-module_wrapper__ynT7R.EmbedBlock-module_isProportional__x8-8g {
+.EmbedBlock-module_isYoutube__WpBkS {
     max-height: 90vh;
 }
   }
 
-.EmbedBlock-module_wrapper__ynT7R .EmbedBlock-module_objectWrap__qpbni {
-  position: static;
-}
-
 /* DEVICES */
 
 @media only screen and (min-width: 32em) {
@@ -3267,40 +3246,6 @@
 }
   }
 
-.RichTitle-module_root__U5XQu.RichTitle-module_isInDynamicBlock__J-gM6 {
-  margin: 0 0 28px;
-}
-
-@media only screen and (min-width: 64em) {
-
-.RichTitle-module_root__U5XQu.RichTitle-module_isInDynamicBlock__J-gM6 {
-    font-size: 37px;
-    line-height: 42px;
-}
-  }
-
-.RichTitle-module_root__U5XQu.RichTitle-module_isInPodcastPlayer__kvEPH {
-  font-size: 19px;
-  line-height: 23px;
-  margin: 0 0 20px;
-}
-
-@media only screen and (min-width: 48em) {
-
-.RichTitle-module_root__U5XQu.RichTitle-module_large__n2URP {
-    font-size: 37px;
-    line-height: 42px;
-}
-  }
-
-@media only screen and (min-width: 64em) {
-
-.RichTitle-module_root__U5XQu.RichTitle-module_medium__KkBLJ {
-    font-size: 1.3rem;
-    line-height: 1.6rem;
-}
-  }
-
 @media only screen and (min-width: 32em) {
 
 .RichTitle-module_mobile__W5L9E {

package/package.json

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

package/src/Button/Button.module.css

@@ -212,13 +212,6 @@
   }
 }
 
-.isInToolbar {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .isInSpoiler svg {
   margin-top: -2px;
   margin-left: 6px;

package/src/Dropdown/Dropdown.module.css

@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
   position: relative;
   z-index: auto;
 
@@ -65,7 +64,11 @@
 .isInAudioPanel .menu {
   right: 0;
   left: auto;
-  transform: translate(-50%, -100%);
+
+  @media $landscapeTablet {
+    right: auto;
+    left: 0;
+  }
 }
 
 .isInAudioPanel .menu ul {
@@ -74,7 +77,7 @@
 
 .menu {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   top: 100%;
   left: 0;
 

package/src/EmbedBlock/EmbedBlock.module.css

@@ -250,7 +250,11 @@
   position: relative;
 }
 
-.wrapper.isProportional {
+.wrapper .objectWrap {
+  position: static;
+}
+
+.isYoutube {
   width: 100%;
   max-height: 70vh;
 
@@ -259,10 +263,6 @@
   }
 }
 
-.wrapper .objectWrap {
-  position: static;
-}
-
 /* DEVICES */
 .mobile {
   @media $mobile {

package/src/EmbedBlock/EmbedBlock.tsx

@@ -98,13 +98,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
       default: {
         return (
           <div className={styles.object}>
-            <div
-              className={makeClassName([
-                [styles.wrapper, true],
-                [styles.isProportional, isProportional]
-              ])}
-              style={style}
-            >
+            <div className={styles.wrapper} style={style}>
               <DangerousHTML className={styles.objectWrap} html={html} />
             </div>
           </div>
@@ -113,7 +107,10 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
     }
   }
 
-  if (isProportional) {
+  if (isProportional && provider !== 'youtube') {
+    style.paddingBottom = `${(block.data.height / block.data.width) * 100}%`
+    style.height = 0
+  } else if (isProportional && provider === 'youtube') {
     style.aspectRatio = `${block.data.width} / ${block.data.height}`
   }
 
@@ -150,7 +147,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
           <div
             className={makeClassName([
               [styles.wrapper, true],
-              [styles.isProportional, isProportional]
+              [styles.isYoutube, true]
             ])}
             style={style}
           >

package/src/Image/Image.module.css

@@ -22,12 +22,6 @@
   height: 100%;
 }
 
-.root.fullRatio img {
-  position: static;
-  width: 100%;
-  height: 100%;
-}
-
 .isStatic img {
   position: relative;
   max-height: 160px;

package/src/Image/index.tsx

@@ -38,8 +38,7 @@ export const Image: React.FC<ImageProps> = ({
   }
 
   const pictureStyles = {
-    paddingBottom:
-      ratio === null ? 'unset' : `${100 / (ratio || width / height)}%`
+    paddingBottom: `${100 / (ratio || width / height)}%`
   }
 
   /* fallback w325 url until w6 was released */
@@ -54,8 +53,7 @@ export const Image: React.FC<ImageProps> = ({
     [
       styles.fullscreen,
       lightBox && optimized && optimized.original && fullscreen
-    ],
-    [styles.fullRatio, ratio === null]
+    ]
   ]
 
   if (styleContext) {

package/src/Meta/Meta.module.css

@@ -56,7 +56,6 @@
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  justify-content: center;
 
   text-align: center;
 }

package/src/Meta/MetaContainer.tsx

@@ -73,9 +73,7 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
             return (
               <MetaItem hasSource={hasSource} bullets key={component.id}>
                 <>
-                  {styleContext !== 'isInDynamicBlock' && (
-                    <SvgSymbol icon="podcast" size="small" />
-                  )}
+                  <SvgSymbol icon="podcast" size="small" />
                   {component.text}
                 </>
               </MetaItem>

package/src/RichTitle/RichTitle.module.css

@@ -113,35 +113,6 @@
   }
 }
 
-.root.isInDynamicBlock {
-  margin: 0 0 28px;
-
-  @media $landscapeTablet {
-    font-size: 37px;
-    line-height: 42px;
-  }
-}
-
-.root.isInPodcastPlayer {
-  font-size: 19px;
-  line-height: 23px;
-  margin: 0 0 20px;
-}
-
-.root.large {
-  @media $portraitTablet {
-    font-size: 37px;
-    line-height: 42px;
-  }
-}
-
-.root.medium {
-  @media $landscapeTablet {
-    font-size: 1.3rem;
-    line-height: 1.6rem;
-  }
-}
-
 .mobile {
   @media $mobile {
     display: none;

package/src/RichTitle/RichTitle.types.ts

@@ -9,5 +9,4 @@ export interface RichTitleProps {
     }
   }
   styleContext?: string[] | string
-  size?: string
 }

package/src/RichTitle/index.tsx

@@ -10,14 +10,12 @@ export const RichTitle: React.FC<RichTitleProps> = ({
     only_on: onlyOn,
     data: { featured, first, second, as: TagName = 'h1' }
   },
-  styleContext,
-  size = 'default'
+  styleContext
 }) => {
   let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true],
-    [styles.featured, !!featured],
-    [styles[size], !!size]
+    [styles.featured, !!featured]
   ]
 
   if (styleContext) {

package/src/SvgSymbol/SvgSymbol.module.css

@@ -194,11 +194,16 @@
 }
 
 .bookmark {
+  width: 17px;
+  height: auto;
+
   cursor: pointer;
 
   stroke-width: 2px;
 
   @media $landscapeTablet {
+    width: 14px;
+
     stroke-width: 1.5px;
   }
 }

package/src/SvgSymbol/SvgSymbol.types.ts

@@ -20,20 +20,19 @@ export type Icons =
   | 'menu'
   | 'fb'
   | 'tw'
+  | 'vk'
+  | 'ok'
   | 'tg'
   | 'chat'
   | 'magic'
   | 'backward'
   | 'forward'
   | 'download'
-  | 'episodeDownload'
   | 'play'
   | 'pause'
   | 'shareBookmark'
   | 'speedHalf'
-  | 'speedThreeQuarters'
   | 'speedOne'
-  | 'speedOneQuarter'
   | 'speedOneHalf'
   | 'speedTwo'
   | 'podcastBookmark'