@meduza/ui-kit-2 1.1.3 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/dist/Meta/Meta.types.d.ts +0 -5
  2. package/dist/MetaItem/MetaItem.types.d.ts +1 -0
  3. package/dist/MetaItemLive/MetaItemLive.types.d.ts +1 -0
  4. package/dist/RawHtmlBlock/RawHtmlBlock.types.d.ts +1 -5
  5. package/dist/RenderBlocks/RenderBlocks.types.d.ts +1 -5
  6. package/dist/SvgSymbol/SvgSymbol.types.d.ts +2 -2
  7. package/dist/SvgSymbol/icons.d.ts +0 -25
  8. package/dist/ToolbarButton/ToolbarButton.types.d.ts +1 -2
  9. package/dist/constants.d.ts +0 -2
  10. package/dist/index.d.ts +0 -1
  11. package/dist/types.d.ts +1 -1
  12. package/dist/ui-kit-2.cjs.development.js +76 -171
  13. package/dist/ui-kit-2.cjs.development.js.map +1 -1
  14. package/dist/ui-kit-2.cjs.production.min.js +1 -1
  15. package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
  16. package/dist/ui-kit-2.esm.js +77 -171
  17. package/dist/ui-kit-2.esm.js.map +1 -1
  18. package/dist/ui-kit-game.css +67 -258
  19. package/dist/ui-kit.css +67 -258
  20. package/package.json +13 -13
  21. package/src/Cover/Cover.module.css +0 -17
  22. package/src/Meta/Meta.module.css +0 -11
  23. package/src/Meta/Meta.stories.tsx +1 -3
  24. package/src/Meta/Meta.types.ts +0 -5
  25. package/src/Meta/MetaContainer.tsx +5 -44
  26. package/src/MetaItem/MetaItem.module.css +9 -27
  27. package/src/MetaItem/MetaItem.types.ts +1 -0
  28. package/src/MetaItem/index.tsx +4 -2
  29. package/src/MetaItemLive/MetaItemLive.module.css +21 -96
  30. package/src/MetaItemLive/MetaItemLive.types.ts +1 -0
  31. package/src/MetaItemLive/index.tsx +5 -2
  32. package/src/RawHtmlBlock/RawHtmlBlock.types.ts +1 -5
  33. package/src/RawHtmlBlock/index.tsx +0 -8
  34. package/src/RawHtmlBlock/mock.json +1 -2
  35. package/src/RenderBlocks/RenderBlocks.types.ts +1 -5
  36. package/src/RenderBlocks/index.tsx +0 -8
  37. package/src/RichTitle/RichTitle.module.css +24 -3
  38. package/src/SvgSymbol/SvgSymbol.module.css +1 -26
  39. package/src/SvgSymbol/SvgSymbol.stories.tsx +1 -2
  40. package/src/SvgSymbol/SvgSymbol.types.ts +0 -6
  41. package/src/SvgSymbol/icons.ts +0 -33
  42. package/src/Tag/Tag.module.css +9 -4
  43. package/src/Toolbar/Toolbar.stories.tsx +2 -18
  44. package/src/ToolbarButton/ToolbarButton.module.css +0 -16
  45. package/src/ToolbarButton/ToolbarButton.types.ts +0 -2
  46. package/src/ToolbarButton/index.tsx +0 -7
  47. package/src/constants.ts +1 -3
  48. package/src/index.tsx +0 -1
  49. package/src/types.ts +0 -1
  50. package/dist/BookmarkButton/BookmarkButton.types.d.ts +0 -6
  51. package/dist/BookmarkButton/index.d.ts +0 -3
  52. package/src/BookmarkButton/BookmarkButton.css +0 -45
  53. package/src/BookmarkButton/BookmarkButton.module.css +0 -45
  54. package/src/BookmarkButton/BookmarkButton.stories.module.css +0 -5
  55. package/src/BookmarkButton/BookmarkButton.stories.tsx +0 -39
  56. package/src/BookmarkButton/BookmarkButton.test.tsx +0 -33
  57. package/src/BookmarkButton/BookmarkButton.types.ts +0 -6
  58. package/src/BookmarkButton/index.tsx +0 -35
@@ -410,9 +410,7 @@
410
410
  }
411
411
 
412
412
  .SvgSymbol-module_card__2nVFu,
413
- .SvgSymbol-module_podcast__Yp05r,
414
- .SvgSymbol-module_read__Bu653,
415
- .SvgSymbol-module_listened__AOn7j {
413
+ .SvgSymbol-module_podcast__Yp05r {
416
414
  width: 15px;
417
415
  height: 15px;
418
416
  }
@@ -553,32 +551,6 @@
553
551
  }
554
552
  }
555
553
 
556
- .SvgSymbol-module_bookmark__JPKyG {
557
- cursor: pointer;
558
-
559
- stroke-width: 2px;
560
- }
561
-
562
- @media only screen and (min-width: 40.625em) {
563
-
564
- .SvgSymbol-module_bookmark__JPKyG {
565
- stroke-width: 1.5px;
566
- }
567
- }
568
-
569
- .SvgSymbol-module_shareBookmark__7w9X9 {
570
- width: 11px;
571
- height: auto;
572
-
573
- cursor: pointer;
574
-
575
- stroke-width: 1.2px;
576
- }
577
-
578
- .SvgSymbol-module_isInToolbar__RzbaX.SvgSymbol-module_bookmark__JPKyG {
579
- width: 14px;
580
- }
581
-
582
554
  .SvgSymbol-module_receipt__o3V8u {
583
555
  width: 10px;
584
556
  height: 13px;
@@ -1286,7 +1258,6 @@
1286
1258
  @media only screen and (min-width: 40.625em) {
1287
1259
 
1288
1260
  .Tag-module_large__EKMu6 {
1289
-
1290
1261
  font-size: 14px;
1291
1262
  line-height: 16px;
1292
1263
  letter-spacing: 1px;
@@ -1318,7 +1289,6 @@
1318
1289
  .Tag-module_is1to1__V-fH5,
1319
1290
  .Tag-module_is1to2__b9Obh,
1320
1291
  .Tag-module_isInSuperBlock__wrFUY {
1321
-
1322
1292
  font-size: 12px;
1323
1293
  line-height: 20px;
1324
1294
  letter-spacing: 1px;
@@ -1329,7 +1299,6 @@
1329
1299
 
1330
1300
  .Tag-module_is1to3__vZT-R,
1331
1301
  .Tag-module_is1to4__MBh5V {
1332
-
1333
1302
  font-size: 10px;
1334
1303
  line-height: 15px;
1335
1304
  letter-spacing: 0.5px;
@@ -1376,6 +1345,12 @@
1376
1345
  }
1377
1346
  }
1378
1347
 
1348
+ .Tag-module_isInBlockMetaContainer__bAmLh {
1349
+ margin-top: -1px;
1350
+
1351
+ line-height: 15px;
1352
+ }
1353
+
1379
1354
  .Tag-module_slide__gzptP,
1380
1355
  .Tag-module_game__NmKec,
1381
1356
  .Tag-module_card__TX87-,
@@ -1408,10 +1383,12 @@
1408
1383
  }
1409
1384
 
1410
1385
  .Tag-module_isInPodcastPlayer__H4sK9 {
1386
+ margin-bottom: 6px;
1387
+
1411
1388
  font-size: 12px;
1412
1389
  line-height: 12px;
1390
+
1413
1391
  opacity: 1;
1414
- margin-bottom: 6px;
1415
1392
  }
1416
1393
 
1417
1394
  @media only screen and (min-width: 32em) {
@@ -2043,57 +2020,6 @@
2043
2020
  }
2044
2021
  }
2045
2022
 
2046
- .BookmarkButton-module_root__A-75w {
2047
- color: #e0e0e0;
2048
- }
2049
-
2050
- .BookmarkButton-module_control__-xy5O {
2051
- margin: 0;
2052
- padding: 5px 3px;
2053
-
2054
- color: inherit;
2055
-
2056
- background-color: transparent;
2057
- border-width: 0;
2058
- outline: none;
2059
-
2060
- cursor: pointer;
2061
-
2062
- -webkit-appearance: none;
2063
-
2064
- -moz-appearance: none;
2065
-
2066
- appearance: none;
2067
- fill: transparent;
2068
- }
2069
-
2070
- .BookmarkButton-module_dark__GkMEC {
2071
- color: #fff;
2072
- }
2073
-
2074
- .BookmarkButton-module_light__1W6tx {
2075
- color: #000;
2076
- }
2077
-
2078
- .BookmarkButton-module_isInBookmarks__YSjjj .BookmarkButton-module_control__-xy5O {
2079
- fill: #e0e0e0;
2080
- }
2081
-
2082
- .BookmarkButton-module_isInBookmarks__YSjjj.BookmarkButton-module_dark__GkMEC .BookmarkButton-module_control__-xy5O {
2083
- fill: #fff;
2084
- }
2085
-
2086
- .BookmarkButton-module_isInBookmarks__YSjjj.BookmarkButton-module_light__1W6tx .BookmarkButton-module_control__-xy5O {
2087
- fill: #000;
2088
- }
2089
-
2090
- @media only screen and (min-width: 40.625em) {
2091
-
2092
- .BookmarkButton-module_isInGrid__Desh- .BookmarkButton-module_control__-xy5O svg {
2093
- width: 12px;
2094
- }
2095
- }
2096
-
2097
2023
  .MaterialTitle-module_root__VSphO {
2098
2024
  display: block;
2099
2025
  }
@@ -2493,20 +2419,6 @@
2493
2419
  }
2494
2420
  }
2495
2421
 
2496
- .Meta-module_bookmark__jcFWn {
2497
- position: absolute;
2498
- right: -12px;
2499
- bottom: -4px;
2500
- z-index: 10;
2501
- }
2502
-
2503
- @media only screen and (min-width: 32em) {
2504
-
2505
- .Meta-module_bookmark__jcFWn {
2506
- display: none;
2507
- }
2508
- }
2509
-
2510
2422
  .Meta-module_isInBookRelated__Ohidg {
2511
2423
  opacity: 0.5;
2512
2424
  }
@@ -3261,7 +3173,6 @@
3261
3173
  @media only screen and (max-width: 40.5625em) {
3262
3174
 
3263
3175
  .RichTitle-module_featured__ULNQn {
3264
-
3265
3176
  font-size: 28px;
3266
3177
  line-height: 30px;
3267
3178
  letter-spacing: 0.3px;
@@ -3280,6 +3191,28 @@
3280
3191
  }
3281
3192
  }
3282
3193
 
3194
+ @media only screen and (max-width: 40.5625em) {
3195
+
3196
+ .RichTitle-module_isInFeaturedBlock__3vYu9 {
3197
+ margin-bottom: 16px;
3198
+
3199
+ font-size: 22px;
3200
+ line-height: 110%;
3201
+ }
3202
+ }
3203
+
3204
+ @media only screen and (max-width: 40.5625em) {
3205
+
3206
+ .RichTitle-module_isInFeaturedBlock__3vYu9 span {
3207
+ display: block;
3208
+
3209
+ padding-top: 4px;
3210
+
3211
+ font-size: 18px;
3212
+ line-height: 120%;
3213
+ }
3214
+ }
3215
+
3283
3216
  .RichTitle-module_isInMediaBlock__2h6rl {
3284
3217
  text-align: left;
3285
3218
  }
@@ -3322,9 +3255,10 @@
3322
3255
  @media only screen and (min-width: 40.625em) {
3323
3256
 
3324
3257
  .RichTitle-module_isInBookRelated__LcCPV {
3258
+ margin: 6px 0 18px;
3259
+
3325
3260
  font-size: 27px;
3326
3261
  line-height: 32px;
3327
- margin: 6px 0 18px;
3328
3262
  }
3329
3263
  }
3330
3264
 
@@ -3341,9 +3275,10 @@
3341
3275
  }
3342
3276
 
3343
3277
  .RichTitle-module_root__U5XQu.RichTitle-module_isInPodcastPlayer__kvEPH {
3278
+ margin: 0 0 20px;
3279
+
3344
3280
  font-size: 19px;
3345
3281
  line-height: 23px;
3346
- margin: 0 0 20px;
3347
3282
  }
3348
3283
 
3349
3284
  @media only screen and (min-width: 40.625em) {
@@ -4745,7 +4680,7 @@ a mark {
4745
4680
  .MetaItem-module_root__sRbrZ {
4746
4681
  display: inline;
4747
4682
 
4748
- margin-right: 15px;
4683
+ margin-right: 6px;
4749
4684
  }
4750
4685
 
4751
4686
  .MetaItem-module_root__sRbrZ > svg {
@@ -4753,21 +4688,23 @@ a mark {
4753
4688
 
4754
4689
  margin-right: 1px;
4755
4690
 
4756
- vertical-align: top;
4757
-
4758
4691
  color: inherit;
4759
4692
 
4693
+ vertical-align: top;
4694
+
4760
4695
  fill: currentColor;
4761
4696
  }
4762
4697
 
4763
4698
  .MetaItem-module_root__sRbrZ a {
4764
4699
  display: inline;
4765
4700
 
4766
- text-decoration: underline;
4767
-
4768
4701
  color: inherit;
4769
4702
 
4703
+ text-decoration: underline;
4704
+
4770
4705
  -webkit-text-decoration-skip: auto;
4706
+
4707
+ text-decoration-skip: auto;
4771
4708
  }
4772
4709
 
4773
4710
  .MetaItem-module_root__sRbrZ a:hover {
@@ -4816,17 +4753,7 @@ a mark {
4816
4753
 
4817
4754
  @media only screen and (max-width: 32.1875em) {
4818
4755
 
4819
- .MetaItem-module_hasSource__35olm.MetaItem-module_listened__XZWFQ::before,
4820
- .MetaItem-module_hasSource__35olm.MetaItem-module_read__O3cUz::before {
4821
- display: inline-block;
4822
- }
4823
- }
4824
-
4825
- @media only screen and (max-width: 32.1875em) {
4826
-
4827
- .MetaItem-module_datetime__--O8c,
4828
- .MetaItem-module_listened__XZWFQ,
4829
- .MetaItem-module_read__O3cUz {
4756
+ .MetaItem-module_datetime__--O8c {
4830
4757
  width: auto;
4831
4758
  }
4832
4759
  }
@@ -4838,27 +4765,16 @@ a mark {
4838
4765
  }
4839
4766
  }
4840
4767
 
4841
- @media only screen and (max-width: 32.1875em) {
4842
-
4843
- .MetaItem-module_hasSource__35olm.MetaItem-module_listened__XZWFQ,
4844
- .MetaItem-module_hasSource__35olm.MetaItem-module_read__O3cUz {
4845
- order: -1;
4846
-
4847
- margin-top: 0;
4848
- }
4849
- }
4850
-
4851
- .MetaItem-module_read__O3cUz svg {
4852
- margin-top: -1px;
4768
+ .MetaItem-module_tag__3HzOp + .MetaItem-module_hasBullets__b1eW9::before {
4769
+ content: none;
4853
4770
  }
4854
4771
 
4855
4772
  .MetaItemLive-module_root__XfQiW {
4856
4773
  position: relative;
4857
4774
 
4858
- display: inline-block;
4859
-
4860
- width: 18px;
4861
- height: 18px;
4775
+ display: inline-flex;
4776
+ gap: 6px;
4777
+ align-items: center;
4862
4778
 
4863
4779
  vertical-align: middle;
4864
4780
  }
@@ -4867,110 +4783,36 @@ a mark {
4867
4783
  color: #b88b59;
4868
4784
  }
4869
4785
 
4870
- .MetaItemLive-module_root__XfQiW::before,
4871
- .MetaItemLive-module_root__XfQiW::after,
4872
- .MetaItemLive-module_frame__FHByQ {
4873
- position: absolute;
4874
- top: 0;
4875
- right: 0;
4876
- bottom: 0;
4877
- left: 0;
4878
- z-index: 0;
4879
- }
4880
-
4881
- .MetaItemLive-module_root__XfQiW {
4882
- margin-top: -4px;
4883
- margin-right: 1px;
4884
-
4885
- transform: translateY(1px);
4886
- }
4887
-
4888
- .MetaItemLive-module_root__XfQiW::before,
4889
- .MetaItemLive-module_root__XfQiW::after,
4890
- .MetaItemLive-module_frame__FHByQ {
4891
-
4892
- border-radius: 50%;
4893
- transform: scale(0);
4894
-
4895
- animation-duration: 1.05s;
4896
- animation-timing-function: linear;
4897
- animation-iteration-count: infinite;
4898
- }
4899
-
4900
- .MetaItemLive-module_frame__FHByQ {
4901
-
4902
- background: currentColor;
4903
-
4904
- animation-name: MetaItemLive-module_liveMiddle__SX4Gs;
4905
- }
4906
-
4907
- .MetaItemLive-module_root__XfQiW::before,
4908
- .MetaItemLive-module_root__XfQiW::after {
4909
-
4910
- border: 1px solid currentColor;
4911
-
4912
- content: '';
4913
- }
4786
+ .MetaItemLive-module_icon__JIMLl {
4787
+ width: 10px;
4788
+ height: 10px;
4789
+ margin-top: -1px;
4914
4790
 
4915
- .MetaItemLive-module_root__XfQiW::before {
4916
- animation-name: MetaItemLive-module_liveFirstWave__QqstP;
4917
- }
4791
+ background-color: #ff4e4e;
4792
+ border-radius: 5px;
4918
4793
 
4919
- .MetaItemLive-module_root__XfQiW::after {
4920
- animation-name: MetaItemLive-module_liveSecondWave__hlbpt;
4794
+ animation: MetaItemLive-module_pulse__zzrle 2s infinite ease-out;
4921
4795
  }
4922
4796
 
4923
- @keyframes MetaItemLive-module_liveMiddle__SX4Gs {
4924
- 14% {
4925
- transform: scale(0);
4926
- }
4927
-
4928
- 30% {
4929
- transform: scale(0.22);
4930
- }
4931
-
4932
- 63% {
4933
- transform: scale(0.22);
4934
- }
4935
-
4936
- 70% {
4937
- transform: scale(0);
4938
- }
4939
-
4940
- 100% {
4941
- transform: scale(0);
4942
- }
4797
+ .MetaItemLive-module_text__wgLcT {
4798
+ color: #ff4e4e;
4799
+ font-weight: 600;
4800
+ font-size: 12px;
4801
+ letter-spacing: 1px;
4802
+ text-transform: uppercase;
4943
4803
  }
4944
4804
 
4945
- @keyframes MetaItemLive-module_liveFirstWave__QqstP {
4946
- 21% {
4947
- transform: scale(0.1);
4948
- }
4949
-
4950
- 53% {
4951
- transform: scale(0.33);
4805
+ @keyframes MetaItemLive-module_pulse__zzrle {
4806
+ 0% {
4807
+ opacity: 1;
4952
4808
  }
4953
4809
 
4954
- 100% {
4955
- transform: scale(0.66);
4956
-
4810
+ 50% {
4957
4811
  opacity: 0;
4958
4812
  }
4959
- }
4960
-
4961
- @keyframes MetaItemLive-module_liveSecondWave__hlbpt {
4962
- 21% {
4963
- transform: scale(0.22);
4964
- }
4965
-
4966
- 53% {
4967
- transform: scale(0.55);
4968
- }
4969
4813
 
4970
4814
  100% {
4971
- transform: scale(0.88);
4972
-
4973
- opacity: 0;
4815
+ opacity: 1;
4974
4816
  }
4975
4817
  }
4976
4818
 
@@ -5645,7 +5487,6 @@ ul.VersesBlock-module_root__CrgSZ:first-child {
5645
5487
  }
5646
5488
 
5647
5489
  .Cover-module_rich__YcxWa {
5648
-
5649
5490
  margin: 0 -20px;
5650
5491
  overflow: hidden;
5651
5492
 
@@ -5700,28 +5541,12 @@ ul.VersesBlock-module_root__CrgSZ:first-child {
5700
5541
 
5701
5542
  .Cover-module_isInDynamicBlock__qO-yt {
5702
5543
  overflow: hidden;
5703
-
5704
- border-radius: 8px;
5705
5544
  }
5706
5545
 
5707
5546
  .Cover-module_isInDynamicBlock__qO-yt .Cover-module_body__eJpUI {
5708
5547
  padding: 0 12px 12px;
5709
5548
  }
5710
5549
 
5711
- .Cover-module_isInDynamicBlock__qO-yt::after {
5712
- position: absolute;
5713
- top: 0;
5714
- right: 0;
5715
- bottom: 0;
5716
- left: 0;
5717
- z-index: 1;
5718
-
5719
- border: 1px solid rgba(0, 0, 0, 0.1);
5720
- border-radius: 8px;
5721
-
5722
- content: '';
5723
- }
5724
-
5725
5550
  /* VISIBILITY */
5726
5551
 
5727
5552
  @media only screen and (min-width: 32em) {
@@ -7141,18 +6966,6 @@ ul.VersesBlock-module_root__CrgSZ:first-child {
7141
6966
  fill: #fff;
7142
6967
  }
7143
6968
 
7144
- .ToolbarButton-module_isDark__gWpv-.ToolbarButton-module_bookmark__7SWkm svg,
7145
- .ToolbarButton-module_dark__5XOEp.ToolbarButton-module_bookmark__7SWkm svg {
7146
- color: #fff;
7147
-
7148
- fill: transparent;
7149
- }
7150
-
7151
- .ToolbarButton-module_isDark__gWpv-.ToolbarButton-module_bookmark__7SWkm.ToolbarButton-module_isActive__N4kkV svg,
7152
- .ToolbarButton-module_dark__5XOEp.ToolbarButton-module_bookmark__7SWkm.ToolbarButton-module_isActive__N4kkV svg {
7153
- fill: currentColor;
7154
- }
7155
-
7156
6969
  .ToolbarButton-module_isDark__gWpv-::before,
7157
6970
  .ToolbarButton-module_dark__5XOEp::before {
7158
6971
  border-left-color: rgba(255, 255, 255, 0.2);
@@ -7188,10 +7001,6 @@ ul.VersesBlock-module_root__CrgSZ:first-child {
7188
7001
  vertical-align: middle;
7189
7002
  }
7190
7003
 
7191
- .ToolbarButton-module_bookmark__7SWkm {
7192
- fill: transparent;
7193
- }
7194
-
7195
7004
  .ToolbarButton-module_isActive__N4kkV {
7196
7005
  fill: currentColor;
7197
7006
  }