@meduza/ui-kit-2 0.8.8 → 0.8.601

package/dist/ui-kit-game.css

@@ -597,8 +597,6 @@
      -moz-user-select: none;
 
           user-select: none;
-
-  gap: 6px;
 }
 
 .Switcher-module_dark__1QQsH {
@@ -679,14 +677,33 @@
   left: 18px;
 }
 
+.Switcher-module_children__uLapU.Switcher-module_left__5-HNa {
+  margin-right: 6px;
+}
+
+.Switcher-module_children__uLapU.Switcher-module_right__82Edk {
+  margin-left: 6px;
+}
+
+/* panel */
+
+.Switcher-module_isInPanel__-nBSf .Switcher-module_children__uLapU {
+
+  color: #999;
+
+  font-size: 13px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
 /* menu */
 
 .Switcher-module_isInMenu__RQVhp {
   font-weight: normal;
 }
 
-.Switcher-module_isInMenu__RQVhp {
-  gap: 8px;
+.Switcher-module_isInMenu__RQVhp .Switcher-module_children__uLapU {
+  margin-right: 8px;
 }
 
 .Switcher-module_isInMenu__RQVhp .Switcher-module_control__60WMX {
@@ -714,6 +731,7 @@
 /* live */
 
 .Switcher-module_isInLive__ZyMCT .Switcher-module_children__uLapU {
+
   color: #7f7f7f;
 
   font-size: 13px;
@@ -1360,6 +1378,10 @@
 }
   }
 
+.Tag-module_isInDynamicBlock__WNleF {
+  opacity: 0.5;
+}
+
 @media only screen and (min-width: 32em) {
 
 .Tag-module_mobile__19oMH {
@@ -2324,6 +2346,12 @@
   fill: inherit;
 }
 
+.Meta-module_isInDynamicBlock__iuEI0 {
+  position: absolute;
+  bottom: 20px;
+  left: 54px;
+}
+
 .Meta-module_rich__dCkJK,
 .Meta-module_podcast__MI8gD,
 .Meta-module_episode__0n9CF,
@@ -3234,6 +3262,10 @@
 }
   }
 
+.RichTitle-module_isInDynamicBlock__J-gM6 {
+  margin: 0 0 28px;
+}
+
 @media only screen and (min-width: 32em) {
 
 .RichTitle-module_mobile__W5L9E {
@@ -5858,10 +5890,11 @@ a mark {
   margin-top: 0;
   margin-bottom: 18px;
 
-  font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
-  font-size: calc(17rem / 16);
   font-weight: 700;
-  line-height: calc(21rem / 16);
+  font-size: 21px;
+
+  font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
+  line-height: 26px;
 }
 
 @media only screen and (min-width: 32em) {
@@ -5869,8 +5902,8 @@ a mark {
 .Spoiler-module_header__iEKsQ h3 {
     margin-bottom: 20px;
 
-    font-size: 21px;
-    line-height: 28px;
+    font-size: 28px;
+    line-height: 34px;
 }
   }
 
@@ -5925,11 +5958,9 @@ a mark {
   margin-left: -20px;
   padding: 12px 20px 20px;
 
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0) 0%,
-    #fff 64%
-  );
+  background-image: linear-gradient(180deg,
+  rgba(255, 255, 255, 0) 0%,
+  #fff 64%);
 
   animation: Spoiler-module_spoilerSticky__YTiyF 500ms ease both;
 }
@@ -6838,118 +6869,6 @@ a mark {
   --metaFill: currentColor;
 }
 
-.ListViewSwitcher-module_root__pBsR5 {
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  flex-flow: row nowrap;
-
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-
-  border-radius: 40px;
-  background-color: #fff;
-}
-
-.ListViewSwitcher-module_input__vtDVD {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  visibility: hidden;
-}
-
-.ListViewSwitcher-module_knob__g-OZ2 {
-  position: relative;
-  z-index: 200;
-
-  display: block;
-
-  transition: 0.25s ease-in-out;
-
-  border-radius: 15px;
-  background: #000;
-}
-
-.ListViewSwitcher-module_sm__y1teD {
-  width: 35px;
-  height: 18px;
-  padding: 2px;
-}
-
-.ListViewSwitcher-module_md__0M8KR {
-  width: 52px;
-  height: 26px;
-  padding: 2px 3px;
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_knob__g-OZ2 {
-  width: 22px;
-  height: 22px;
-}
-
-.ListViewSwitcher-module_grid__qBmnM,
-.ListViewSwitcher-module_list__NORMp {
-  position: absolute;
-
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-
-.ListViewSwitcher-module_grid__qBmnM {
-  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.359' y='.5' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='7.078' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='6.938' y='.5' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='6.938' y='7.078' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3C/svg%3E");
-}
-
-.ListViewSwitcher-module_list__NORMp {
-  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.359' y='.5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='9.5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3C/svg%3E");
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_input__vtDVD:checked ~ .ListViewSwitcher-module_knob__g-OZ2 {
-  transform: translateX(24px);
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_grid__qBmnM,
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_list__NORMp {
-  width: 13px;
-  height: 13px;
-  top: 7px;
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_grid__qBmnM {
-  left: 10px;
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_list__NORMp {
-  right: 10px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_grid__qBmnM {
-  left: 5px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_list__NORMp {
-  right: 5px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_knob__g-OZ2 {
-  width: 14px;
-  height: 14px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_grid__qBmnM,
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_list__NORMp {
-  width: 8px;
-  height: 8px;
-  top: 5px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_input__vtDVD:checked ~ .ListViewSwitcher-module_knob__g-OZ2 {
-  transform: translateX(16px);
-}
-
 .ToolbarButton-module_root__upsEH {
   display: block;
 

package/dist/ui-kit.css

@@ -597,8 +597,6 @@
      -moz-user-select: none;
 
           user-select: none;
-
-  gap: 6px;
 }
 
 .Switcher-module_dark__1QQsH {
@@ -679,14 +677,33 @@
   left: 18px;
 }
 
+.Switcher-module_children__uLapU.Switcher-module_left__5-HNa {
+  margin-right: 6px;
+}
+
+.Switcher-module_children__uLapU.Switcher-module_right__82Edk {
+  margin-left: 6px;
+}
+
+/* panel */
+
+.Switcher-module_isInPanel__-nBSf .Switcher-module_children__uLapU {
+
+  color: #999;
+
+  font-size: 13px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
 /* menu */
 
 .Switcher-module_isInMenu__RQVhp {
   font-weight: normal;
 }
 
-.Switcher-module_isInMenu__RQVhp {
-  gap: 8px;
+.Switcher-module_isInMenu__RQVhp .Switcher-module_children__uLapU {
+  margin-right: 8px;
 }
 
 .Switcher-module_isInMenu__RQVhp .Switcher-module_control__60WMX {
@@ -714,6 +731,7 @@
 /* live */
 
 .Switcher-module_isInLive__ZyMCT .Switcher-module_children__uLapU {
+
   color: #7f7f7f;
 
   font-size: 13px;
@@ -1360,6 +1378,10 @@
 }
   }
 
+.Tag-module_isInDynamicBlock__WNleF {
+  opacity: 0.5;
+}
+
 @media only screen and (min-width: 32em) {
 
 .Tag-module_mobile__19oMH {
@@ -2324,6 +2346,12 @@
   fill: inherit;
 }
 
+.Meta-module_isInDynamicBlock__iuEI0 {
+  position: absolute;
+  bottom: 20px;
+  left: 54px;
+}
+
 .Meta-module_rich__dCkJK,
 .Meta-module_podcast__MI8gD,
 .Meta-module_episode__0n9CF,
@@ -3234,6 +3262,10 @@
 }
   }
 
+.RichTitle-module_isInDynamicBlock__J-gM6 {
+  margin: 0 0 28px;
+}
+
 @media only screen and (min-width: 32em) {
 
 .RichTitle-module_mobile__W5L9E {
@@ -5858,10 +5890,11 @@ a mark {
   margin-top: 0;
   margin-bottom: 18px;
 
-  font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
-  font-size: calc(17rem / 16);
   font-weight: 700;
-  line-height: calc(21rem / 16);
+  font-size: 21px;
+
+  font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
+  line-height: 26px;
 }
 
 @media only screen and (min-width: 32em) {
@@ -5869,8 +5902,8 @@ a mark {
 .Spoiler-module_header__iEKsQ h3 {
     margin-bottom: 20px;
 
-    font-size: 21px;
-    line-height: 28px;
+    font-size: 28px;
+    line-height: 34px;
 }
   }
 
@@ -5925,11 +5958,9 @@ a mark {
   margin-left: -20px;
   padding: 12px 20px 20px;
 
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0) 0%,
-    #fff 64%
-  );
+  background-image: linear-gradient(180deg,
+  rgba(255, 255, 255, 0) 0%,
+  #fff 64%);
 
   animation: Spoiler-module_spoilerSticky__YTiyF 500ms ease both;
 }
@@ -6838,118 +6869,6 @@ a mark {
   --metaFill: currentColor;
 }
 
-.ListViewSwitcher-module_root__pBsR5 {
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  flex-flow: row nowrap;
-
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-
-  border-radius: 40px;
-  background-color: #fff;
-}
-
-.ListViewSwitcher-module_input__vtDVD {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  visibility: hidden;
-}
-
-.ListViewSwitcher-module_knob__g-OZ2 {
-  position: relative;
-  z-index: 200;
-
-  display: block;
-
-  transition: 0.25s ease-in-out;
-
-  border-radius: 15px;
-  background: #000;
-}
-
-.ListViewSwitcher-module_sm__y1teD {
-  width: 35px;
-  height: 18px;
-  padding: 2px;
-}
-
-.ListViewSwitcher-module_md__0M8KR {
-  width: 52px;
-  height: 26px;
-  padding: 2px 3px;
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_knob__g-OZ2 {
-  width: 22px;
-  height: 22px;
-}
-
-.ListViewSwitcher-module_grid__qBmnM,
-.ListViewSwitcher-module_list__NORMp {
-  position: absolute;
-
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-
-.ListViewSwitcher-module_grid__qBmnM {
-  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.359' y='.5' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='7.078' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='6.938' y='.5' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='6.938' y='7.078' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3C/svg%3E");
-}
-
-.ListViewSwitcher-module_list__NORMp {
-  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.359' y='.5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='9.5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3C/svg%3E");
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_input__vtDVD:checked ~ .ListViewSwitcher-module_knob__g-OZ2 {
-  transform: translateX(24px);
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_grid__qBmnM,
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_list__NORMp {
-  width: 13px;
-  height: 13px;
-  top: 7px;
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_grid__qBmnM {
-  left: 10px;
-}
-
-.ListViewSwitcher-module_md__0M8KR .ListViewSwitcher-module_list__NORMp {
-  right: 10px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_grid__qBmnM {
-  left: 5px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_list__NORMp {
-  right: 5px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_knob__g-OZ2 {
-  width: 14px;
-  height: 14px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_grid__qBmnM,
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_list__NORMp {
-  width: 8px;
-  height: 8px;
-  top: 5px;
-}
-
-.ListViewSwitcher-module_sm__y1teD .ListViewSwitcher-module_input__vtDVD:checked ~ .ListViewSwitcher-module_knob__g-OZ2 {
-  transform: translateX(16px);
-}
-
 .ToolbarButton-module_root__upsEH {
   display: block;
 

package/package.json

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

package/src/Image/index.tsx

@@ -38,7 +38,10 @@ export const Image: React.FC<ImageProps> = ({
   }
 
   const pictureStyles = {
-    paddingBottom: `${100 / (ratio || width / height)}%`
+    paddingBottom:
+      styleContext === 'isInDynamicBlock'
+        ? '100%'
+        : `${100 / (ratio || width / height)}%`
   }
 
   /* fallback w325 url until w6 was released */

package/src/Meta/Meta.module.css

@@ -9,6 +9,12 @@
   fill: inherit;
 }
 
+.isInDynamicBlock {
+  position: absolute;
+  bottom: 20px;
+  left: 54px;
+}
+
 .rich,
 .podcast,
 .episode,

package/src/Meta/MetaContainer.tsx

@@ -70,6 +70,13 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
             )
           }
           case 'duration': {
+            if (styleContext === 'isInDynamicBlock') {
+              return (
+                <MetaItem hasSource={hasSource} bullets key={component.id}>
+                  {component.text}
+                </MetaItem>
+              )
+            }
             return (
               <MetaItem hasSource={hasSource} bullets key={component.id}>
                 <>
@@ -92,7 +99,11 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
               >
                 <Timestamp
                   publishedAt={component.datetime}
-                  type={format || 'date'}
+                  type={
+                    styleContext === 'isInDynamicBlock'
+                      ? 'fromNow'
+                      : format || 'date'
+                  }
                   locale={lang}
                 />
               </MetaItem>

package/src/RichTitle/RichTitle.module.css

@@ -113,6 +113,10 @@
   }
 }
 
+.isInDynamicBlock {
+  margin: 0 0 28px;
+}
+
 .mobile {
   @media $mobile {
     display: none;

package/src/Spoiler/Spoiler.module.css

@@ -61,16 +61,17 @@
   margin-top: 0;
   margin-bottom: 18px;
 
-  font-family: $secondaryFont;
-  font-size: calc(17rem / 16);
   font-weight: 700;
-  line-height: calc(21rem / 16);
+  font-size: 21px;
+
+  font-family: $secondaryFont;
+  line-height: 26px;
 
   @media $mobile {
     margin-bottom: 20px;
 
-    font-size: 21px;
-    line-height: 28px;
+    font-size: 28px;
+    line-height: 34px;
   }
 }
 
@@ -119,11 +120,9 @@
   margin-left: -20px;
   padding: 12px 20px 20px;
 
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0) 0%,
-    #fff 64%
-  );
+  background-image: linear-gradient(180deg,
+  rgba(255, 255, 255, 0) 0%,
+  #fff 64%);
 
   animation: spoilerSticky 500ms ease both;
 

package/src/SvgSymbol/SvgSymbol.types.ts

@@ -20,12 +20,15 @@ export type Icons =
   | 'menu'
   | 'fb'
   | 'tw'
+  | 'vk'
+  | 'ok'
   | 'tg'
   | 'chat'
   | 'magic'
   | 'backward'
   | 'forward'
   | 'download'
+  | 'episodeDownload'
   | 'play'
   | 'pause'
   | 'shareBookmark'

package/src/SvgSymbol/icons.ts

@@ -76,6 +76,13 @@ export const icons = {
       '<path d="M12.5 2C19.404 2 25 7.596 25 14.5S19.404 27 12.5 27 0 21.404 0 14.5 5.596 2 12.5 2zm0 1.5c-6.075 0-11 4.925-11 11s4.925 11 11 11 11-4.925 11-11-4.925-11-11-11zm6 15.75a.75.75 0 01.102 1.493l-.102.007h-12a.75.75 0 01-.102-1.493l.102-.007h12zm-6-12a.75.75 0 01.743.648L13.25 8v7.598l1.834-1.222a.75.75 0 11.832 1.248l-3 2a.75.75 0 01-.832 0l-3-2a.75.75 0 11.832-1.248l1.834 1.223V8a.75.75 0 01.648-.743l.102-.007z" fill-rule="nonzero" fill="currentColor" />'
   },
 
+  episodeDownload: {
+    width: 30,
+    height: 30,
+    content:
+      '<g opacity="0.4"><circle cx="15" cy="15" r="10.5" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><path d="M15 19.5L15 10.5M15 19.5L18.5 17.2257M15 19.5L11.5 17.2257" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></g>'
+  },
+
   play: {
     width: 62,
     height: 62,

package/src/Switcher/Switcher.module.css

@@ -13,8 +13,6 @@
   cursor: pointer;
 
   user-select: none;
-
-  gap: 6px;
 }
 
 .dark {
@@ -95,13 +93,31 @@
   left: 18px;
 }
 
+.children.left {
+  margin-right: 6px;
+}
+
+.children.right {
+  margin-left: 6px;
+}
+
+/* panel */
+.isInPanel .children {
+
+  color: #999;
+
+  font-size: 13px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
 /* menu */
 .isInMenu {
   font-weight: normal;
 }
 
-.isInMenu {
-  gap: 8px;
+.isInMenu .children {
+  margin-right: 8px;
 }
 
 .isInMenu .control {
@@ -127,6 +143,7 @@
 
 /* live */
 .isInLive .children {
+
   color: #7f7f7f;
 
   font-size: 13px;