@meduza/ui-kit-2 0.4.14 → 0.4.15

package/dist/ui-kit.css

@@ -814,26 +814,28 @@
   max-width: 420px;
   min-height: 80px;
   margin: 0 auto;
-  padding: 22px 20px 28px;
 
   animation: Popover-module_disappear__uUn2b 350ms ease both;
+
+  border-radius: 8px 8px 0 0;
+  background-color: #fff;
 }
 .Popover-module_dismiss__W8KFF {
   position: absolute;
-  top: -23px;
-  left: 50%;
+  z-index: 10;
+  top: 10px;
+  right: 10px;
 
-  width: 50px;
-  height: 36px;
+  width: 26px;
+  height: 26px;
   padding: 0;
 
-  transform: translateX(-50%);
+  cursor: pointer;
 
-  opacity: 0.4;
   border-width: 0;
-  border-radius: 0;
-  background-color: transparent;
-  background-image: url("data:image/svg+xml,%3Csvg width='17' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.445 1.832l6.946 4.63a2 2 0 0 0 2.218 0l6.946-4.63a1 1 0 1 0-1.11-1.664L8.5 4.798 1.555.168a1 1 0 1 0-1.11 1.664z' fill='%23F7F7F7' fill-rule='nonzero'/%3E%3C/svg%3E");
+  border-radius: 13px;
+  background-color: #ebebeb;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1 1 10 10M11 1 1 11' stroke='%23757575' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   box-shadow: none;
@@ -844,35 +846,50 @@
 
           appearance: none;
 }
-.Popover-module_background__apiio {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
+.Popover-module_visible__XVQLW .Popover-module_container__y4SB1 {
+  animation: Popover-module_appear__b-CZ2 350ms ease both;
+}
+.Popover-module_body__UJEZf {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 
-  overflow: hidden;
+  max-height: 68vh;
+  padding: 18px 20px 28px;
 
-  width: 100%;
-  height: 100%;
+  color: #000;
 
-  border-radius: 8px 8px 0 0;
+  font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+
+  overscroll-behavior: none;
 }
-.Popover-module_background__apiio rect {
+.Popover-module_body__UJEZf::before,
+.Popover-module_body__UJEZf::after {
   position: absolute;
+  right: 0;
+  left: 0;
 
-  width: 100%;
-  height: 100%;
+  content: '';
 }
-.Popover-module_visible__XVQLW .Popover-module_container__y4SB1 {
-  animation: Popover-module_appear__b-CZ2 350ms ease both;
+.Popover-module_body__UJEZf::before {
+  top: 0;
+
+  height: 29px;
+
+  border-radius: 8px 8px 0 0;
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
 }
-.Popover-module_body__UJEZf {
-  font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
-  font-size: 16px;
-  line-height: 22px;
+.Popover-module_body__UJEZf::after {
+  bottom: 0;
+
+  height: 48px;
+
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
 }
 .Popover-module_body__UJEZf h3 {
-  margin: 0 0 5px;
+  margin: 0 0 16px;
+  padding-right: 26px;
 
   font-size: inherit;
   font-weight: 700;
@@ -940,17 +957,54 @@
 .Footnote-module_root__W5D8G {
   position: relative;
 
-  width: 320px;
-  padding: 20px;
-
   border-radius: 8px;
   background-color: #fff;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 5px 20px rgba(0, 0, 0, 0.2);
 }
 .Footnote-module_body__C-ZC- {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  max-height: 400px;
+  padding: 20px 20px 28px;
+
+  color: #000;
+
   font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
+  font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
   font-size: 16px;
   line-height: 22px;
+  line-height: 22px;
+
+  overscroll-behavior: none;
+}
+.Footnote-module_body__C-ZC-::before,
+.Footnote-module_body__C-ZC-::after {
+  position: absolute;
+  right: 0;
+  left: 0;
+
+  content: '';
+  pointer-events: none;
+}
+.Footnote-module_body__C-ZC-::before {
+  top: 0;
+
+  height: 29px;
+
+  border-radius: 8px 8px 0 0;
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
+}
+.Footnote-module_body__C-ZC-::after {
+  bottom: 0;
+
+  height: 48px;
+
+  border-radius: 0 0 8px 8px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
 }
 .Footnote-module_body__C-ZC- h3 {
   margin: 0 0 16px;
@@ -974,11 +1028,12 @@
 }
 .Footnote-module_dismiss__Q2hAX {
   position: absolute;
+  z-index: 10;
   top: 0;
   right: 0;
 
   margin: 0;
-  padding: 6px 9px 10px;
+  padding: 15px 15px 10px;
 
   cursor: pointer;
 
@@ -995,7 +1050,6 @@
   height: 12px;
 }
 
-
 /* Colors */
 /* Fonts */
 /* Gap */
@@ -2858,10 +2912,9 @@
 .RichTitle-module_root__U5XQu {
   margin: 0 0 20px;
 
-  font-weight: 700;
-  font-size: 19px;
-
   font-family: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
+  font-size: 19px;
+  font-weight: 700;
   line-height: 23px;
 }
 @media only screen and (min-width: 48em) {
@@ -2876,9 +2929,9 @@
   margin-bottom: 0;
 }
 .RichTitle-module_root__U5XQu span {
-  font-weight: normal;
-  font-size: 20px;
   font-family: 'PF Regal', 'PF Regal Text Pro', 'Georgia', serif;
+  font-size: 20px;
+  font-weight: normal;
 }
 @media only screen and (min-width: 48em) {
 .RichTitle-module_root__U5XQu span {
@@ -2910,10 +2963,10 @@
 }
 @media only screen and (max-width: 63.9375em) {
 .RichTitle-module_featured__ULNQn {
+    letter-spacing: 0.3px;
 
     font-size: 28px;
     line-height: 30px;
-    letter-spacing: 0.3px;
 }
   }
 @media only screen and (max-width: 63.9375em) {
@@ -2952,6 +3005,15 @@
     font-size: 1.35rem;
 }
   }
+.RichTitle-module_isInPodcastPlayer__kvEPH {
+  margin-bottom: 20px;
+
+  font-size: 19px;
+  line-height: 23px;
+}
+.RichTitle-module_isInPodcastPlayer__kvEPH span {
+  font-size: 20px;
+}
 @media only screen and (min-width: 32em) {
 .RichTitle-module_mobile__W5L9E {
     display: none;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.14",
+  "version": "0.4.15",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -27,9 +27,9 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "dayjs": "^1.10.3",
-    "react": ">=16",
-    "react-intersection-observer": "^8.31.0",
+    "dayjs": "^1.11.9",
+    "react": ">=18",
+    "react-intersection-observer": "^9.5.2",
     "react-router-dom": "^5.2.0"
   },
   "lint-staged": {
@@ -72,6 +72,7 @@
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
     "dayjs": "^1.11.9",
     "dts-cli": "^2.0.3",
     "eslint": "^8.45.0",
@@ -103,6 +104,7 @@
     "storybook": "^7.1.0",
     "storybook-addon-react-docgen": "^1.2.43",
     "storybook-addon-react-router-v6": "^1.0.2",
+    "style-loader": "^3.3.3",
     "stylelint": "^15.10.2",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-sass-guidelines": "^10.0.0",
@@ -114,6 +116,5 @@
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
     "utils": "^0.3.1"
-  },
-  "dependencies": {}
+  }
 }

package/src/Footnote/Footnote.module.css

@@ -3,18 +3,58 @@
 .root {
   position: relative;
 
-  width: 320px;
-  padding: 20px;
-
   border-radius: 8px;
   background-color: #fff;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 5px 20px rgba(0, 0, 0, 0.2);
 }
 
 .body {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  max-height: 400px;
+  padding: 20px 20px 28px;
+
+  color: #000;
+
+  font-family: $secondaryFont;
   font-family: $secondaryFont;
   font-size: 16px;
+  font-size: 16px;
   line-height: 22px;
+  line-height: 22px;
+
+  overscroll-behavior: none;
+}
+
+.body::before,
+.body::after {
+  position: absolute;
+  right: 0;
+  left: 0;
+
+  content: '';
+  pointer-events: none;
+}
+
+.body::before {
+  top: 0;
+
+  height: 29px;
+
+  border-radius: 8px 8px 0 0;
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
+}
+
+.body::after {
+  bottom: 0;
+
+  height: 48px;
+
+  border-radius: 0 0 8px 8px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
 }
 
 .body h3 {
@@ -44,11 +84,12 @@
 
 .dismiss {
   position: absolute;
+  z-index: 10;
   top: 0;
   right: 0;
 
   margin: 0;
-  padding: 6px 9px 10px;
+  padding: 15px 15px 10px;
 
   cursor: pointer;
 
@@ -66,4 +107,3 @@
   width: 12px;
   height: 12px;
 }
-

package/src/Footnote/Footnote.stories.tsx

@@ -15,16 +15,33 @@ export default {
 const Example: React.FC = () => {
   return (
     <>
-      <div className={styles.root}>
+      <div className={styles.root} style={{ maxWidth: 400 }}>
         <Footnote onClose={(): void => alert('Handle Close')}>
-          <h3>Заголовок лвлвлдфова выа вовофдывлоа</h3>
-          <p>
-            «Я видел истинного Дональда Трампа, наблюдал за ним. Это обманщик,
-            притворщик и задира. Настоящий паршивец! Все его слова абсурдны
-            и&nbsp;направлены на скандал. Рейган когда-то сказал Горбачёву:
-            «Мистер Горбачёв, развалите эту стену!», а&nbsp;Трамп собирается
-            взводить стену между Америкой и Мексикой.
-          </p>
+          <h3>Из расследования Туровского Из расследования Туровского</h3>
+          <div>
+            <p>
+              «Летом 2007 года Лиду отправили подтягивать математику в Боброво.
+              К тому моменту Бебчук стал для нее „родной фигурой и наставником,
+              помогал, слушал“. В первые дни он парил ее голой в бане. В доме
+              Бебчука вместо кроватей стояли большие полати — двухэтажная
+              деревянная конструкция, на которой помещалось до 15 человек. Лида
+              спала на втором этаже, Бебчук внизу. В одну из ночей ей не
+              удавалось заснуть, она ворочалась. Бебчук услышал. „Не можешь
+              уснуть? Иди сюда, будем вместе засыпать“. Лида спустилась.
+              „Забирайся под одеяло“, — сказал преподаватель. Так и не сумев
+              заснуть, Лида ночью вышла из дома». «Летом 2007 года Лиду
+              отправили подтягивать математику в Боброво. К тому моменту Бебчук
+              стал для нее „родной фигурой и наставником, помогал, слушал“. В
+              первые дни он парил ее голой в бане. В доме Бебчука вместо
+              кроватей стояли большие полати — двухэтажная деревянная
+              конструкция, на которой помещалось до 15 человек. Лида спала на
+              втором этаже, Бебчук внизу. В одну из ночей ей не удавалось
+              заснуть, она ворочалась. Бебчук услышал. „Не можешь уснуть? Иди
+              сюда, будем вместе засыпать“. Лида спустилась. „Забирайся под
+              одеяло“, — сказал преподаватель. Так и не сумев заснуть, Лида
+              ночью вышла из дома».
+            </p>
+          </div>
         </Footnote>
       </div>
     </>

package/src/Popover/Popover.module.css

@@ -47,27 +47,29 @@
   max-width: 420px;
   min-height: 80px;
   margin: 0 auto;
-  padding: 22px 20px 28px;
 
   animation: disappear 350ms ease both;
+
+  border-radius: 8px 8px 0 0;
+  background-color: #fff;
 }
 
 .dismiss {
   position: absolute;
-  top: -23px;
-  left: 50%;
+  z-index: 10;
+  top: 10px;
+  right: 10px;
 
-  width: 50px;
-  height: 36px;
+  width: 26px;
+  height: 26px;
   padding: 0;
 
-  transform: translateX(-50%);
+  cursor: pointer;
 
-  opacity: 0.4;
   border-width: 0;
-  border-radius: 0;
-  background-color: transparent;
-  background-image: url("data:image/svg+xml,%3Csvg width='17' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.445 1.832l6.946 4.63a2 2 0 0 0 2.218 0l6.946-4.63a1 1 0 1 0-1.11-1.664L8.5 4.798 1.555.168a1 1 0 1 0-1.11 1.664z' fill='%23F7F7F7' fill-rule='nonzero'/%3E%3C/svg%3E");
+  border-radius: 13px;
+  background-color: #ebebeb;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1 1 10 10M11 1 1 11' stroke='%23757575' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   box-shadow: none;
@@ -75,39 +77,55 @@
   appearance: none;
 }
 
-.background {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
+.visible .container {
+  animation: appear 350ms ease both;
+}
 
-  overflow: hidden;
+.body {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 
-  width: 100%;
-  height: 100%;
+  max-height: 68vh;
+  padding: 18px 20px 28px;
 
-  border-radius: 8px 8px 0 0;
+  color: #000;
+
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+
+  overscroll-behavior: none;
 }
 
-.background rect {
+.body::before,
+.body::after {
   position: absolute;
+  right: 0;
+  left: 0;
 
-  width: 100%;
-  height: 100%;
+  content: '';
 }
 
-.visible .container {
-  animation: appear 350ms ease both;
+.body::before {
+  top: 0;
+
+  height: 29px;
+
+  border-radius: 8px 8px 0 0;
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
 }
 
-.body {
-  font-family: $secondaryFont;
-  font-size: 16px;
-  line-height: 22px;
+.body::after {
+  bottom: 0;
+
+  height: 48px;
+
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
 }
 
 .body h3 {
-  margin: 0 0 5px;
+  margin: 0 0 16px;
+  padding-right: 26px;
 
   font-size: inherit;
   font-weight: 700;

package/src/Popover/Popover.stories.tsx

@@ -35,7 +35,31 @@ const Example: React.FC = () => {
               setIsPopoverShown(false)
             }}
           >
-            Здесь мог бы быть ваш компонент
+            <h3>Из расследования Туровского Из расследования Туровского</h3>
+            <div>
+              <p>
+                «Летом 2007 года Лиду отправили подтягивать математику в
+                Боброво. К тому моменту Бебчук стал для нее „родной фигурой и
+                наставником, помогал, слушал“. В первые дни он парил ее голой в
+                бане. В доме Бебчука вместо кроватей стояли большие полати —
+                двухэтажная деревянная конструкция, на которой помещалось до 15
+                человек. Лида спала на втором этаже, Бебчук внизу. В одну из
+                ночей ей не удавалось заснуть, она ворочалась. Бебчук услышал.
+                „Не можешь уснуть? Иди сюда, будем вместе засыпать“. Лида
+                спустилась. „Забирайся под одеяло“, — сказал преподаватель. Так
+                и не сумев заснуть, Лида ночью вышла из дома». «Летом 2007 года
+                Лиду отправили подтягивать математику в Боброво. К тому моменту
+                Бебчук стал для нее „родной фигурой и наставником, помогал,
+                слушал“. В первые дни он парил ее голой в бане. В доме Бебчука
+                вместо кроватей стояли большие полати — двухэтажная деревянная
+                конструкция, на которой помещалось до 15 человек. Лида спала на
+                втором этаже, Бебчук внизу. В одну из ночей ей не удавалось
+                заснуть, она ворочалась. Бебчук услышал. „Не можешь уснуть? Иди
+                сюда, будем вместе засыпать“. Лида спустилась. „Забирайся под
+                одеяло“, — сказал преподаватель. Так и не сумев заснуть, Лида
+                ночью вышла из дома».
+              </p>
+            </div>
           </Popover>
         )}
       </div>

package/src/Popover/index.tsx

@@ -53,27 +53,7 @@ export const Popover: React.FC<PopoverProps> = ({ children, onClose }) => {
           onClick={(): void => handleClose()}
           aria-label="dismiss"
         />
-        <svg width="100%" className={styles.background}>
-          <defs>
-            <mask id="myMask" x="0" y="0" width="100%" height="100%">
-              <rect fill="white" y="0" width="100%" height="100%" x="0" />
-              <svg x="50%" overflow="visible">
-                <g transform="translate(-12 0)">
-                  <path d="M4.61852778e-14,9.76996262e-15 L9.84597532,5.80270273 C11.0992017,6.54128882 12.6546044,6.54128882 13.9078308,5.80270273 L23.7538061,9.76996262e-15 L4.61852778e-14,9.76996262e-15 Z" />
-                </g>
-              </svg>
-            </mask>
-          </defs>
-          <rect
-            fill="#F7F7F7"
-            id="base-mask"
-            mask="url(#myMask)"
-            x="0"
-            y="0"
-            width="100%"
-            height="100%"
-          />
-        </svg>
+
         <div className={styles.body}>{children}</div>
       </div>
     </div>

package/src/RichTitle/RichTitle.module.css

@@ -3,10 +3,9 @@
 .root {
   margin: 0 0 20px;
 
-  font-weight: 700;
-  font-size: 19px;
-
   font-family: $secondaryFont;
+  font-size: 19px;
+  font-weight: 700;
   line-height: 23px;
 
   @media $portraitTablet {
@@ -22,9 +21,9 @@
 }
 
 .root span {
-  font-weight: normal;
-  font-size: 20px;
   font-family: $primaryFont;
+  font-size: 20px;
+  font-weight: normal;
 
   @media $portraitTablet {
     font-size: 38px;
@@ -61,10 +60,10 @@
 
 .featured {
   @media $landscapeTabletMax {
+    letter-spacing: 0.3px;
 
     font-size: 28px;
     line-height: 30px;
-    letter-spacing: 0.3px;
   }
 }
 
@@ -105,6 +104,17 @@
   }
 }
 
+.isInPodcastPlayer {
+  margin-bottom: 20px;
+
+  font-size: 19px;
+  line-height: 23px;
+}
+
+.isInPodcastPlayer span {
+  font-size: 20px;
+}
+
 .mobile {
   @media $mobile {
     display: none;