@meduza/ui-kit-2 0.8.629 → 0.8.690

package/dist/ui-kit-game.css

@@ -599,6 +599,8 @@
      -moz-user-select: none;
 
           user-select: none;
+
+  gap: 6px;
 }
 
 .Switcher-module_dark__1QQsH {
@@ -679,33 +681,14 @@
   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 .Switcher-module_children__uLapU {
-  margin-right: 8px;
+.Switcher-module_isInMenu__RQVhp {
+  gap: 8px;
 }
 
 .Switcher-module_isInMenu__RQVhp .Switcher-module_control__60WMX {
@@ -733,7 +716,6 @@
 /* live */
 
 .Switcher-module_isInLive__ZyMCT .Switcher-module_children__uLapU {
-
   color: #7f7f7f;
 
   font-size: 13px;
@@ -2778,6 +2760,18 @@
   position: relative;
 }
 
+.EmbedBlock-module_wrapper__ynT7R.EmbedBlock-module_isProportional__x8-8g {
+  width: 100%;
+  max-height: 70vh;
+}
+
+@media only screen and (min-width: 40.625em) {
+
+.EmbedBlock-module_wrapper__ynT7R.EmbedBlock-module_isProportional__x8-8g {
+    max-height: 90vh;
+}
+  }
+
 .EmbedBlock-module_wrapper__ynT7R .EmbedBlock-module_objectWrap__qpbni {
   position: static;
 }
@@ -5925,11 +5919,10 @@ a mark {
   margin-top: 0;
   margin-bottom: 18px;
 
-  font-weight: 700;
-  font-size: 21px;
-
   font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
-  line-height: 26px;
+  font-size: calc(17rem / 16);
+  font-weight: 700;
+  line-height: calc(21rem / 16);
 }
 
 @media only screen and (min-width: 32em) {
@@ -5937,8 +5930,8 @@ a mark {
 .Spoiler-module_header__iEKsQ h3 {
     margin-bottom: 20px;
 
-    font-size: 28px;
-    line-height: 34px;
+    font-size: 21px;
+    line-height: 28px;
 }
   }
 
@@ -5993,9 +5986,11 @@ 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;
 }
@@ -6904,6 +6899,118 @@ 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

@@ -599,6 +599,8 @@
      -moz-user-select: none;
 
           user-select: none;
+
+  gap: 6px;
 }
 
 .Switcher-module_dark__1QQsH {
@@ -679,33 +681,14 @@
   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 .Switcher-module_children__uLapU {
-  margin-right: 8px;
+.Switcher-module_isInMenu__RQVhp {
+  gap: 8px;
 }
 
 .Switcher-module_isInMenu__RQVhp .Switcher-module_control__60WMX {
@@ -733,7 +716,6 @@
 /* live */
 
 .Switcher-module_isInLive__ZyMCT .Switcher-module_children__uLapU {
-
   color: #7f7f7f;
 
   font-size: 13px;
@@ -2778,6 +2760,18 @@
   position: relative;
 }
 
+.EmbedBlock-module_wrapper__ynT7R.EmbedBlock-module_isProportional__x8-8g {
+  width: 100%;
+  max-height: 70vh;
+}
+
+@media only screen and (min-width: 64em) {
+
+.EmbedBlock-module_wrapper__ynT7R.EmbedBlock-module_isProportional__x8-8g {
+    max-height: 90vh;
+}
+  }
+
 .EmbedBlock-module_wrapper__ynT7R .EmbedBlock-module_objectWrap__qpbni {
   position: static;
 }
@@ -5925,11 +5919,10 @@ a mark {
   margin-top: 0;
   margin-bottom: 18px;
 
-  font-weight: 700;
-  font-size: 21px;
-
   font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
-  line-height: 26px;
+  font-size: calc(17rem / 16);
+  font-weight: 700;
+  line-height: calc(21rem / 16);
 }
 
 @media only screen and (min-width: 32em) {
@@ -5937,8 +5930,8 @@ a mark {
 .Spoiler-module_header__iEKsQ h3 {
     margin-bottom: 20px;
 
-    font-size: 28px;
-    line-height: 34px;
+    font-size: 21px;
+    line-height: 28px;
 }
   }
 
@@ -5993,9 +5986,11 @@ 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;
 }
@@ -6904,6 +6899,118 @@ 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.629",
+  "version": "0.8.690",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/EmbedBlock/EmbedBlock.module.css

@@ -250,6 +250,15 @@
   position: relative;
 }
 
+.wrapper.isProportional {
+  width: 100%;
+  max-height: 70vh;
+
+  @media $landscapeTablet {
+    max-height: 90vh;
+  }
+}
+
 .wrapper .objectWrap {
   position: static;
 }

package/src/EmbedBlock/EmbedBlock.tsx

@@ -98,7 +98,13 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
       default: {
         return (
           <div className={styles.object}>
-            <div className={styles.wrapper} style={style}>
+            <div
+              className={makeClassName([
+                [styles.wrapper, true],
+                [styles.isProportional, isProportional]
+              ])}
+              style={style}
+            >
               <DangerousHTML className={styles.objectWrap} html={html} />
             </div>
           </div>
@@ -108,8 +114,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
   }
 
   if (isProportional) {
-    style.paddingBottom = `${(block.data.height / block.data.width) * 100}%`
-    style.height = 0
+    style.aspectRatio = `${block.data.width} / ${block.data.height}`
   }
 
   let classNames: ClassNames = [
@@ -142,7 +147,13 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
     <figure className={makeClassName(classNames)}>
       {children && (
         <div className={styles.object}>
-          <div className={styles.wrapper} style={style}>
+          <div
+            className={makeClassName([
+              [styles.wrapper, true],
+              [styles.isProportional, isProportional]
+            ])}
+            style={style}
+          >
             <div className={styles.objectWrap}>{children}</div>
           </div>
         </div>

package/src/Image/index.tsx

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

package/src/ListViewSwitcher/ListViewSwitcher.module.css

@@ -0,0 +1,109 @@
+.root {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+
+  cursor: pointer;
+  user-select: none;
+
+  border-radius: 40px;
+  background-color: #fff;
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  visibility: hidden;
+}
+
+.knob {
+  position: relative;
+  z-index: $zIndex-2;
+
+  display: block;
+
+  transition: 0.25s ease-in-out;
+
+  border-radius: 15px;
+  background: #000;
+}
+
+.sm {
+  width: 35px;
+  height: 18px;
+  padding: 2px;
+}
+
+.md {
+  width: 52px;
+  height: 26px;
+  padding: 2px 3px;
+}
+
+.md .knob {
+  width: 22px;
+  height: 22px;
+}
+
+.grid,
+.list {
+  position: absolute;
+
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.grid {
+  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");
+}
+
+.list {
+  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");
+}
+
+.md .input:checked ~ .knob {
+  transform: translateX(24px);
+}
+
+.md .grid,
+.md .list {
+  width: 13px;
+  height: 13px;
+  top: 7px;
+}
+
+.md .grid {
+  left: 10px;
+}
+
+.md .list {
+  right: 10px;
+}
+
+.sm .grid {
+  left: 5px;
+}
+
+.sm .list {
+  right: 5px;
+}
+
+.sm .knob {
+  width: 14px;
+  height: 14px;
+}
+
+.sm .grid,
+.sm .list {
+  width: 8px;
+  height: 8px;
+  top: 5px;
+}
+
+.sm .input:checked ~ .knob {
+  transform: translateX(16px);
+}

package/src/ListViewSwitcher/ListViewSwitcher.stories.module.css

@@ -0,0 +1,6 @@
+.root {
+  display: flex;
+  flex-flow: row wrap;
+
+  gap: 24px;
+}

package/src/ListViewSwitcher/ListViewSwitcher.stories.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import { ListViewSwitcher } from '.'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './ListViewSwitcher.stories.module.css'
+
+export default {
+  title: 'Main / ListViewSwitcher',
+  component: ListViewSwitcher,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const [enabledOne, setEnabledOne] = useState(false)
+  const [enabledTwo, setEnabledTwo] = useState(false)
+  return (
+    <div className={styles.root}>
+      <ListViewSwitcher
+        enabled={enabledOne}
+        size="sm"
+        onChange={(e) => setEnabledOne(e.target.checked)}
+      />
+      <ListViewSwitcher
+        enabled={enabledTwo}
+        size="md"
+        onChange={(e) => setEnabledTwo(e.target.checked)}
+      />
+    </div>
+  )
+}
+
+export const Default: React.FC = () => (
+  <PreviewWrapper theme="dark">
+    <Example />
+  </PreviewWrapper>
+)