@meduza/ui-kit-2 0.1.9 → 0.1.11

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 (35) hide show
  1. package/dist/DotsOnImage/DotsOnImage.types.d.ts +4 -0
  2. package/dist/Footnote/Footnote.stories.d.ts +10 -0
  3. package/dist/Footnote/Footnote.types.d.ts +5 -0
  4. package/dist/Footnote/index.d.ts +3 -0
  5. package/dist/Image/Image.types.d.ts +4 -1
  6. package/dist/index.d.ts +1 -0
  7. package/dist/ui-kit-2.cjs.development.js +295 -245
  8. package/dist/ui-kit-2.cjs.development.js.map +1 -1
  9. package/dist/ui-kit-2.cjs.production.min.js +1 -1
  10. package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
  11. package/dist/ui-kit-2.esm.js +295 -246
  12. package/dist/ui-kit-2.esm.js.map +1 -1
  13. package/dist/ui-kit.css +707 -589
  14. package/package.json +1 -1
  15. package/src/DotsOnImage/DotsOnImage.module.css +31 -11
  16. package/src/DotsOnImage/DotsOnImage.test.tsx +1 -1
  17. package/src/DotsOnImage/DotsOnImage.types.ts +3 -0
  18. package/src/DotsOnImage/index.tsx +47 -20
  19. package/src/DotsOnImage/mock.json +96 -8
  20. package/src/EmbedBlock/EmbedBlock.module.css +1 -1
  21. package/src/EmbedBlock/EmbedBlock.tsx +1 -1
  22. package/src/EmbedBlock/mock.json +54 -0
  23. package/src/Footnote/Footnote.module.css +69 -0
  24. package/src/Footnote/Footnote.stories.module.css +5 -0
  25. package/src/Footnote/Footnote.stories.tsx +43 -0
  26. package/src/Footnote/Footnote.test.tsx +20 -0
  27. package/src/Footnote/Footnote.types.ts +5 -0
  28. package/src/Footnote/index.tsx +26 -0
  29. package/src/Image/Image.stories.tsx +1 -0
  30. package/src/Image/Image.types.ts +4 -1
  31. package/src/Image/index.tsx +12 -6
  32. package/src/Popover/Popover.module.css +36 -2
  33. package/src/Popover/index.tsx +1 -1
  34. package/src/SimpleBlock/FootnoteLink.css +7 -0
  35. package/src/index.tsx +1 -0
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.1.9",
2
+ "version": "0.1.11",
3
3
  "license": "MIT",
4
4
  "description": "UIKit for Meduza",
5
5
  "repository": "https://github.com/meduza-corp/ui-kit-2.git",
package/src/DotsOnImage/DotsOnImage.module.css CHANGED
@@ -33,29 +33,49 @@
33
33
  appearance: none;
34
34
  }
35
35
 
36
+ .dot svg {
37
+ display: block;
38
+ }
39
+
36
40
  .popover {
37
41
  position: absolute;
38
42
  z-index: 10;
39
- top: 50%;
40
- left: 50%;
43
+ }
44
+
45
+ .popover.isRight.isTop {
46
+ transform: translateX(50px);
47
+ }
41
48
 
42
- width: 340px;
43
- padding: 25px;
49
+ .popover.isLeft.isTop {
50
+ transform: translateX(-100%) translateX(-22px);
51
+ }
44
52
 
45
- transform: translate(-50%, -50%);
53
+ .popover.isRight.isBottom {
54
+ transform: translateX(50px) translateY(-100%) translateY(22px);
55
+ }
46
56
 
47
- border: 1px solid rgba(0, 0, 0, 0.1);
48
- border-radius: 8px;
49
- background-color: #fff;
50
- box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
57
+ .popover.isLeft.isBottom {
58
+ transform: translateX(-100%) translateX(-22px) translateY(-100%) translateY(22px);
59
+ }
51
60
 
61
+ .popoverTitle {
62
+ margin-bottom: 16px;
63
+
64
+ font-weight: 600;
65
+ }
66
+
67
+ .popoverBody {
52
68
  font-family: $secondaryFont;
53
69
  font-size: 16px;
54
70
  line-height: 22px;
55
71
  }
56
72
 
57
- .popoverTitle {
58
- font-weight: 600;
73
+ .popoverText p {
74
+ margin: 0;
75
+ }
76
+
77
+ .popoverText a:hover {
78
+ color: $gold;
59
79
  }
60
80
 
61
81
  .dismiss {
package/src/DotsOnImage/DotsOnImage.test.tsx CHANGED
@@ -11,7 +11,7 @@ describe('Dots On Image', () => {
11
11
  const renderComponent = () => render(<DotsOnImage block={data} />)
12
12
 
13
13
  it('should have root style', () => {
14
- const { getByTestId } = renderComponent()
14
+ const { getByTestId } = renderComponent()
15
15
 
16
16
  const dotsOnImage = getByTestId('dots-on-image')
17
17
 
package/src/DotsOnImage/DotsOnImage.types.ts CHANGED
@@ -4,6 +4,9 @@ export interface PopoverData {
4
4
  title?: string
5
5
  body?: string
6
6
  id?: string
7
+ align?: 'isTop' | 'isBottom'
8
+ side?: 'isLeft' | 'isRight'
9
+ style?: React.CSSProperties
7
10
  show: boolean
8
11
  }
9
12
 
package/src/DotsOnImage/index.tsx CHANGED
@@ -1,7 +1,13 @@
1
1
  import React, { useState } from 'react'
2
2
  import { PopoverData, DotsOnImageProps, SingleDot } from './DotsOnImage.types'
3
3
  import { Image } from '../Image'
4
- import { SvgSymbol } from '../SvgSymbol'
4
+ import { Popover } from '../Popover'
5
+ import { Footnote } from '../Footnote'
6
+
7
+ import viewportSize from '../utils/viewportSize'
8
+ import { MediaQuerySizes } from '../constants'
9
+
10
+ import makeClassName from '../utils/makeClassName'
5
11
 
6
12
  import styles from './DotsOnImage.module.css'
7
13
 
@@ -17,12 +23,19 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
17
23
 
18
24
  const handleDotClick = (dot: SingleDot): void => {
19
25
  const shouldShow = dot.id !== popover.id
26
+ const side = dot.position.x > 50 ? 'isLeft' : 'isRight'
27
+ const align = dot.position.y > 50 ? 'isBottom' : 'isTop'
28
+
29
+ const style = { top: `${dot.position.y}%`, left: `${dot.position.x}%` }
20
30
 
21
31
  setPopover({
22
32
  title: dot.title,
23
33
  body: dot.body,
24
34
  show: shouldShow,
25
- id: shouldShow ? dot.id : null
35
+ id: shouldShow ? dot.id : null,
36
+ style,
37
+ side,
38
+ align
26
39
  })
27
40
  }
28
41
 
@@ -42,10 +55,7 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
42
55
  onClick={(): void => handleDotClick(dot)}
43
56
  >
44
57
  {dot.icon.type === 'svg' && (
45
- <div
46
- className={styles.icon}
47
- dangerouslySetInnerHTML={{ __html: dot.icon.svg_string }}
48
- />
58
+ <div dangerouslySetInnerHTML={{ __html: dot.icon.svg_string }} />
49
59
  )}
50
60
  {dot.icon.type === 'number' && dot.icon.number}
51
61
  </button>
@@ -58,24 +68,41 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
58
68
  height={height}
59
69
  alt={credit}
60
70
  display={display}
71
+ fullscreen={{ mobile: false, desktop: false }}
61
72
  />
62
73
  </div>
63
74
 
64
75
  {popover.show && (
65
- <div className={styles.popover}>
66
- <button
67
- className={styles.dismiss}
68
- type="button"
69
- onClick={(): void => setPopover({ show: false })}
70
- >
71
- <SvgSymbol icon="cross" size="unset" />
72
- </button>
73
- <div className={styles.popoverTitle}>{popover.title}</div>
74
- <div
75
- className={styles.popoverBody}
76
- dangerouslySetInnerHTML={{ __html: popover.body }}
77
- />
78
- </div>
76
+ <>
77
+ {viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? (
78
+ <div
79
+ className={makeClassName([
80
+ [styles.popover, true],
81
+ [styles[popover.side], !!popover.side],
82
+ [styles[popover.align], !!popover.align]
83
+ ])}
84
+ style={popover.style}
85
+ >
86
+ <Footnote
87
+ onClose={(): void => {
88
+ setPopover({ show: false })
89
+ }}
90
+ >
91
+ <h3>{popover.title}</h3>
92
+ <div dangerouslySetInnerHTML={{ __html: popover.body }} />
93
+ </Footnote>
94
+ </div>
95
+ ) : (
96
+ <Popover
97
+ onClose={(): void => {
98
+ setPopover({ show: false })
99
+ }}
100
+ >
101
+ <h3>{popover.title}</h3>
102
+ <div dangerouslySetInnerHTML={{ __html: popover.body }} />
103
+ </Popover>
104
+ )}
105
+ </>
79
106
  )}
80
107
  </div>
81
108
  )
package/src/DotsOnImage/mock.json CHANGED
@@ -3,11 +3,11 @@
3
3
  "data": {
4
4
  "dots": [
5
5
  {
6
- "title": "заг 1ой точки",
7
- "body": "<p>тест на <strong>точке</strong></p>",
6
+ "title": "Мафия и Голливуд",
7
+ "body": "<p>Но Голливуду тех лет далеко за вдохновением ходить было не нужно. Мафия в 20-е подминала под себя профсоюзы по всей стране, и Голливуд не был исключением. Один из таких профсоюзов возглавил Томас Мэлой. Когда в 1931 году уволенный киномеханик пришёл к нему жаловаться, то подручный Мэлоя застрелил его прямо в кабинете. Причём без всяких последствий для себя.</p>",
8
8
  "position": {
9
- "x": 43.86,
10
- "y": 31.03
9
+ "x": 5,
10
+ "y": 5
11
11
  },
12
12
  "icon": {
13
13
  "type": "svg",
@@ -17,11 +17,11 @@
17
17
  "id": "0-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
18
18
  },
19
19
  {
20
- "title": "2222",
21
- "body": "<p>sdsd</p>",
20
+ "title": "Аль Капоне в кино",
21
+ "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
22
22
  "position": {
23
- "x": 16.05,
24
- "y": 18.83
23
+ "x": 95,
24
+ "y": 5
25
25
  },
26
26
  "icon": {
27
27
  "type": "svg",
@@ -29,7 +29,95 @@
29
29
  "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
30
30
  },
31
31
  "id": "1-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
32
+ },
33
+ {
34
+ "title": "Крайне правая точка",
35
+ "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
36
+ "position": {
37
+ "x": 95,
38
+ "y": 95
39
+ },
40
+ "icon": {
41
+ "type": "svg",
42
+ "color": "#006000",
43
+ "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
44
+ },
45
+ "id": "1-e3b0c44298fc1c149af33bf4c8996fb92427ae41e4649b934ca495991b7852b855"
46
+ },
47
+ {
48
+ "title": "Крайне правая точка",
49
+ "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
50
+ "position": {
51
+ "x": 5,
52
+ "y": 95
53
+ },
54
+ "icon": {
55
+ "type": "svg",
56
+ "color": "#006000",
57
+ "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
58
+ },
59
+ "id": "1-e3b0c44298f3c1c149af33bf4c8996fb92427ae41e4649b934ca495991b7852b855"
60
+ },
61
+
62
+ {
63
+ "title": "Крайне правая точка",
64
+ "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
65
+ "position": {
66
+ "x": 45,
67
+ "y": 50
68
+ },
69
+ "icon": {
70
+ "type": "svg",
71
+ "color": "#006000",
72
+ "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
73
+ },
74
+ "id": "1-e3b0c4429833f3c1c149af33bf4c8996fb92427ae41e4649b934ca495991b7852b855"
75
+ },
76
+
77
+ {
78
+ "title": "Крайне правая точка",
79
+ "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
80
+ "position": {
81
+ "x": 45,
82
+ "y": 65
83
+ },
84
+ "icon": {
85
+ "type": "svg",
86
+ "color": "#006000",
87
+ "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
88
+ },
89
+ "id": "1-e3b0c4429833f3c1c149af33bf4112c8996fb92427ae41e4649b934ca495991b7852b855"
90
+ },
91
+
92
+ {
93
+ "title": "Крайне правая точка",
94
+ "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
95
+ "position": {
96
+ "x": 65,
97
+ "y": 50
98
+ },
99
+ "icon": {
100
+ "type": "svg",
101
+ "color": "#006000",
102
+ "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
103
+ },
104
+ "id": "1-e3b0c4429833333f3c1c14brfe9af33bf4c8996fb92427ae41e4649b934ca495991b7852b855"
105
+ },
106
+ {
107
+ "title": "Крайне правая точка",
108
+ "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
109
+ "position": {
110
+ "x": 65,
111
+ "y": 65
112
+ },
113
+ "icon": {
114
+ "type": "svg",
115
+ "color": "#006000",
116
+ "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
117
+ },
118
+ "id": "1-e3b0c4429833331212123f3c1c149af33bf4c8996fb92427ae41e4649b934ca495991b7852b855"
32
119
  }
120
+
33
121
  ],
34
122
  "display": "full",
35
123
  "width": 972,
package/src/EmbedBlock/EmbedBlock.module.css CHANGED
@@ -183,7 +183,7 @@
183
183
  }
184
184
  }
185
185
 
186
- .mobile .figure {
186
+ .mobile:first-child .figure {
187
187
  overflow: hidden;
188
188
 
189
189
  border-radius: 8px 8px 0 0;
package/src/EmbedBlock/EmbedBlock.tsx CHANGED
@@ -64,7 +64,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
64
64
  <div className={styles.figure}>
65
65
  {(small || optimized) && (
66
66
  <Image
67
- fullscreen={block.data.fullscreen}
67
+ fullscreen={{ desktop: block.data.fullscreen, mobile: true }}
68
68
  source={!optimized && [small, large]}
69
69
  optimized={block.data.optimized}
70
70
  width={block.data.width}
package/src/EmbedBlock/mock.json CHANGED
@@ -1,5 +1,59 @@
1
1
  {
2
2
  "blocks": [
3
+ {
4
+ "type": "image",
5
+ "data": {
6
+ "display": "full",
7
+ "wh_810_540_url": "/image/attachments/images/006/022/145/wh_810_540/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
8
+ "wh_1245_710_url": "/image/attachments/images/006/022/145/wh_1245_710/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
9
+ "wh_1245_500_url": "/image/attachments/images/006/022/145/wh_1245_500/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
10
+ "wh_615_410_url": "/image/attachments/images/006/022/145/wh_615_410/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
11
+ "wh_405_270_url": "/image/attachments/images/006/022/145/wh_405_270/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
12
+ "wh_300_200_url": "/image/attachments/images/006/022/145/wh_300_200/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
13
+ "wh_165_110_url": "/image/attachments/images/006/022/145/wh_165_110/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
14
+ "small_url": "/image/attachments/images/006/022/145/small/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
15
+ "large_url": "/image/attachments/images/006/022/145/large/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
16
+ "elarge_url": "/image/attachments/images/006/022/145/elarge/ZRtrMPOL6Ln6ueg8KtNKSw.jpg",
17
+ "width": 1335,
18
+ "height": 890,
19
+ "credit": "Юрий Кочетков / EPA / Scanpix / LETA",
20
+ "cc": "default",
21
+ "optimized": {
22
+ "original": "//meduza.io/impro/PtZvJ5JurKgW-1AdzsDHVlDlPwAKRcJB0UGvgarVDf8/fill/2670/0/ce/0/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
23
+ "w325": {
24
+ "1x": "//meduza.io/impro/bXuqIom5SkRUpfsJA5BQ-duxWrALKByyCr08D1yDCSg/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
25
+ "2x": "//meduza.io/impro/8BbOPP7tV-OGFdXlnasKehgelisec7s9VIDAPhtIVDQ/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
26
+ "1x_webp": "//meduza.io/impro/qTkyd2zHXHpMmo9_uxoLiT7Xwm8vxwxdSTaAPY2Gkdw/fill/325/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp",
27
+ "2x_webp": "//meduza.io/impro/bpAMWl3t_898BbbGuIOlbR4w8_Kb77NmAfdYSEELLvg/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp"
28
+ },
29
+ "w520": {
30
+ "1x": "//meduza.io/impro/R2upNlenqwR6Z6we2UgdC_vFYoZQ4qiRo5YBgUAZTbM/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
31
+ "2x": "//meduza.io/impro/0HgISx0Nv6UYoyK8PBEgv6tB3Ssa8tfX7zbJbqzG8wI/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
32
+ "1x_webp": "//meduza.io/impro/xdt0Sddar2lp6PcEwLl7vttDereiiWk-QF7SHD1Xmgs/fill/520/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp",
33
+ "2x_webp": "//meduza.io/impro/4frg34uxP4MwtF4mcWsap1mRWIwYhTkIONm71TJgPrA/fill/1040/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp"
34
+ },
35
+ "w650": {
36
+ "1x": "//meduza.io/impro/8BbOPP7tV-OGFdXlnasKehgelisec7s9VIDAPhtIVDQ/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
37
+ "2x": "//meduza.io/impro/lwtOwwFZZGAST8kkpBbgC76Tfvxd5mxUo0JVTcO5a34/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
38
+ "1x_webp": "//meduza.io/impro/bpAMWl3t_898BbbGuIOlbR4w8_Kb77NmAfdYSEELLvg/fill/650/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp",
39
+ "2x_webp": "//meduza.io/impro/Ddfk-WNH0L0kYuv1R7BUqRUcoXajbSeA0tnKUqsIMPg/fill/1300/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp"
40
+ },
41
+ "w980": {
42
+ "1x": "//meduza.io/impro/FuUFZmpeQKVTmkZ4Z5zublVgbHqgEWUyEKe7HXrQixQ/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
43
+ "2x": "//meduza.io/impro/HiF_Usblflj_WTa24DTm2LhdrBQiPqhztCqX73wR9yk/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
44
+ "1x_webp": "//meduza.io/impro/FRtFIe5VhF2Gb8pe0vF7OJAmjXF7nrE526IH4tCD604/fill/980/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp",
45
+ "2x_webp": "//meduza.io/impro/avZnHZmafat0w93_m724mu5R-LCKwAcg5vn0GlZeCQ4/fill/1960/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp"
46
+ },
47
+ "w1335": {
48
+ "1x": "//meduza.io/impro/LsNA9OYcJKlZk-CF6JHa2yL8m4VH5e18qrMk7haAHU8/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
49
+ "2x": "//meduza.io/impro/LPqHgdkpbkvLnlGuoHS3ELtsOpdXKmlsFdSpGaGkSEc/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.jpg",
50
+ "1x_webp": "//meduza.io/impro/f8FT_SlTC8zDLfB9KuTyeWqbo_FPBOU1CuEFJn6N060/fill/1335/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp",
51
+ "2x_webp": "//meduza.io/impro/yd51sL25-mAkFsjRKjqS425Ca8ruyLQrX8KVZdIRJCs/fill/2670/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/MjIvMTQ1L29yaWdp/bmFsL1pSdHJNUE9M/NkxuNnVlZzhLdE5L/U3cuanBn.webp"
52
+ }
53
+ }
54
+ },
55
+ "id": "0-774f211fb1a626befc8d638b37573731753e34a81205cca744f88d7978ca5620"
56
+ },
3
57
  {
4
58
  "type": "dots_on_image",
5
59
  "data": {
package/src/Footnote/Footnote.module.css ADDED
@@ -0,0 +1,69 @@
1
+ @import '../vars.css';
2
+
3
+ .root {
4
+ position: relative;
5
+
6
+ width: 320px;
7
+ padding: 20px;
8
+
9
+ border-radius: 8px;
10
+ background-color: #fff;
11
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
12
+ }
13
+
14
+ .body {
15
+ font-family: $secondaryFont;
16
+ font-size: 16px;
17
+ line-height: 22px;
18
+ }
19
+
20
+ .body h3 {
21
+ margin: 0 0 16px;
22
+
23
+ font-size: inherit;
24
+ font-weight: 600;
25
+ line-height: inherit;
26
+ }
27
+
28
+ .body p {
29
+ margin: 0;
30
+ }
31
+
32
+ .body p + p {
33
+ margin-top: 6px;
34
+ }
35
+
36
+ .body a {
37
+ color: inherit;
38
+ box-shadow: inset 0 -1px $gold;
39
+ }
40
+
41
+ .body a:hover {
42
+ color: $gold;
43
+ }
44
+
45
+ .dismiss {
46
+ position: absolute;
47
+ top: 0;
48
+ right: 0;
49
+
50
+ margin: 0;
51
+ padding: 6px 9px 10px;
52
+
53
+ cursor: pointer;
54
+
55
+ color: $ash;
56
+ border-width: 0;
57
+ outline: none;
58
+ background-color: transparent;
59
+ }
60
+
61
+ .dismiss:hover {
62
+ color: $nikel;
63
+ }
64
+
65
+ .dismiss svg {
66
+ width: 12px;
67
+ height: 12px;
68
+ }
69
+
package/src/Footnote/Footnote.stories.module.css ADDED
@@ -0,0 +1,5 @@
1
+ @import '../vars.css';
2
+
3
+ .root {
4
+ display: block;
5
+ }
package/src/Footnote/Footnote.stories.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import React from 'react'
2
+ import { Footnote } from './'
3
+ import { PreviewWrapper } from '../_storybook/PreviewWrapper'
4
+
5
+ import styles from './Footnote.stories.module.css'
6
+
7
+ export default {
8
+ title: 'Main / Footnote',
9
+ component: Footnote,
10
+ parameters: {
11
+ themeWrapperSideBySide: true
12
+ }
13
+ }
14
+
15
+ const Example: React.FC = () => {
16
+ return (
17
+ <>
18
+ <div className={styles.root}>
19
+ <Footnote onClose={(): void => alert('Handle Close')}>
20
+ <h3>Заголовок лвлвлдфова выа вовофдывлоа</h3>
21
+ <p>
22
+ «Я видел истинного Дональда Трампа, наблюдал за ним. Это обманщик,
23
+ притворщик и задира. Настоящий паршивец! Все его слова абсурдны
24
+ и&nbsp;направлены на скандал. Рейган когда-то сказал Горбачёву:
25
+ «Мистер Горбачёв, развалите эту стену!», а&nbsp;Трамп собирается
26
+ взводить стену между Америкой и Мексикой.
27
+ </p>
28
+ </Footnote>
29
+ </div>
30
+ </>
31
+ )
32
+ }
33
+
34
+ export const Default: React.FC = () => (
35
+ <>
36
+ <PreviewWrapper theme="light">
37
+ <Example />
38
+ </PreviewWrapper>
39
+ <PreviewWrapper theme="dark">
40
+ <Example />
41
+ </PreviewWrapper>
42
+ </>
43
+ )
package/src/Footnote/Footnote.test.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import React from 'react'
2
+ import { render } from '@testing-library/react'
3
+ import { Footnote } from './'
4
+ import { FootnoteProps } from './Footnote.types'
5
+
6
+ import styles from './Footnote.module.css'
7
+
8
+ describe('Footnote', () => {
9
+ let props: FootnoteProps
10
+
11
+ const renderComponent = () => render(<Footnote {...props} />)
12
+
13
+ it('should have root style', () => {
14
+ const { getByTestId } = renderComponent()
15
+
16
+ const footnote = getByTestId('footnote')
17
+
18
+ expect(footnote).toHaveClass(styles.root)
19
+ })
20
+ })
package/src/Footnote/Footnote.types.ts ADDED
@@ -0,0 +1,5 @@
1
+ import React from 'react'
2
+ export interface FootnoteProps {
3
+ children: React.ReactNode | JSX.Element[] | JSX.Element
4
+ onClose: () => void
5
+ }
package/src/Footnote/index.tsx ADDED
@@ -0,0 +1,26 @@
1
+ import React from 'react'
2
+ import { FootnoteProps } from './Footnote.types'
3
+ import makeClassName from '../utils/makeClassName'
4
+
5
+ import { SvgSymbol } from '../SvgSymbol'
6
+
7
+ import styles from './Footnote.module.css'
8
+
9
+ export const Footnote: React.FC<FootnoteProps> = ({ children, onClose }) => {
10
+ return (
11
+ <div
12
+ data-testid="footnote"
13
+ className={makeClassName([[styles.root, true]])}
14
+ >
15
+ <button
16
+ className={styles.dismiss}
17
+ type="button"
18
+ onClick={(): void => onClose()}
19
+ >
20
+ <SvgSymbol icon="cross" size="unset" />
21
+ </button>
22
+
23
+ <div className={styles.body}>{children}</div>
24
+ </div>
25
+ )
26
+ }
package/src/Image/Image.stories.tsx CHANGED
@@ -29,6 +29,7 @@ const Example: React.FC = () => {
29
29
  alt={data.credit}
30
30
  display={data.display}
31
31
  lazy={data.lazy}
32
+ fullscreen={{ mobile: true, desktop: false }}
32
33
  />
33
34
  </div>
34
35
  </>
package/src/Image/Image.types.ts CHANGED
@@ -20,7 +20,10 @@ export interface ImageProps {
20
20
  height?: number
21
21
  source?: string[]
22
22
  lazy?: boolean
23
- fullscreen?: boolean
23
+ fullscreen?: {
24
+ mobile: boolean
25
+ desktop: boolean
26
+ }
24
27
  ratio?: number
25
28
  }
26
29
 
package/src/Image/index.tsx CHANGED
@@ -24,13 +24,19 @@ export const Image: React.FC<ImageProps> = ({
24
24
  const { lightBox } = useContext(BlockContext)
25
25
 
26
26
  const handleClick = (): void => {
27
+ if (!fullscreen || !lightBox || (optimized && !optimized.original)) {
28
+ return
29
+ }
30
+
27
31
  const { width: viewportWidth } = viewportSize()
28
32
 
29
- if (
30
- (optimized && !optimized.original) ||
31
- !lightBox ||
32
- (viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen)
33
- ) {
33
+ const disableFullscreenDesktop =
34
+ viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.desktop
35
+
36
+ const disableFullscreenMobile =
37
+ viewportWidth < MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.mobile
38
+
39
+ if (disableFullscreenDesktop || disableFullscreenMobile) {
34
40
  return
35
41
  }
36
42
 
@@ -56,7 +62,7 @@ export const Image: React.FC<ImageProps> = ({
56
62
  <div
57
63
  className={makeClassName([
58
64
  [styles.root, true],
59
- [styles.fullscreen, fullscreen]
65
+ [styles.fullscreen, fullscreen && fullscreen.desktop]
60
66
  ])}
61
67
  style={blockStyles}
62
68
  data-testid="image"