@meduza/ui-kit-2 0.1.10 → 0.1.12

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 (21) hide show
  1. package/dist/DotsOnImage/DotsOnImage.types.d.ts +4 -0
  2. package/dist/Image/Image.types.d.ts +4 -1
  3. package/dist/ui-kit-2.cjs.development.js +31 -8
  4. package/dist/ui-kit-2.cjs.development.js.map +1 -1
  5. package/dist/ui-kit-2.cjs.production.min.js +1 -1
  6. package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
  7. package/dist/ui-kit-2.esm.js +31 -8
  8. package/dist/ui-kit-2.esm.js.map +1 -1
  9. package/dist/ui-kit.css +1078 -1064
  10. package/package.json +1 -1
  11. package/src/DotsOnImage/DotsOnImage.module.css +22 -3
  12. package/src/DotsOnImage/DotsOnImage.types.ts +3 -0
  13. package/src/DotsOnImage/index.tsx +20 -6
  14. package/src/DotsOnImage/mock.json +92 -4
  15. package/src/EmbedBlock/EmbedBlock.tsx +1 -1
  16. package/src/EmbedBlock/mock.json +54 -0
  17. package/src/Footnote/Footnote.module.css +3 -4
  18. package/src/Image/Image.stories.tsx +1 -0
  19. package/src/Image/Image.types.ts +4 -1
  20. package/src/Image/index.tsx +12 -6
  21. package/src/Popover/Popover.module.css +1 -1
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.1.10",
2
+ "version": "0.1.12",
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
@@ -31,15 +31,34 @@
31
31
  line-height: 28px;
32
32
 
33
33
  appearance: none;
34
+ will-change: opacity;
35
+ }
36
+
37
+ .dot svg {
38
+ display: block;
39
+
40
+ will-change: opacity;
34
41
  }
35
42
 
36
43
  .popover {
37
44
  position: absolute;
38
45
  z-index: 10;
39
- top: 50%;
40
- left: 50%;
46
+ }
47
+
48
+ .popover.isRight.isTop {
49
+ transform: translateX(50px);
50
+ }
51
+
52
+ .popover.isLeft.isTop {
53
+ transform: translateX(-100%) translateX(-22px);
54
+ }
55
+
56
+ .popover.isRight.isBottom {
57
+ transform: translateX(50px) translateY(-100%) translateY(22px);
58
+ }
41
59
 
42
- transform: translate(-50%, -50%);
60
+ .popover.isLeft.isBottom {
61
+ transform: translateX(-100%) translateX(-22px) translateY(-100%) translateY(22px);
43
62
  }
44
63
 
45
64
  .popoverTitle {
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
@@ -7,6 +7,8 @@ import { Footnote } from '../Footnote'
7
7
  import viewportSize from '../utils/viewportSize'
8
8
  import { MediaQuerySizes } from '../constants'
9
9
 
10
+ import makeClassName from '../utils/makeClassName'
11
+
10
12
  import styles from './DotsOnImage.module.css'
11
13
 
12
14
  export const DotsOnImage: React.FC<DotsOnImageProps> = ({
@@ -21,12 +23,19 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
21
23
 
22
24
  const handleDotClick = (dot: SingleDot): void => {
23
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}%` }
24
30
 
25
31
  setPopover({
26
32
  title: dot.title,
27
33
  body: dot.body,
28
34
  show: shouldShow,
29
- id: shouldShow ? dot.id : null
35
+ id: shouldShow ? dot.id : null,
36
+ style,
37
+ side,
38
+ align
30
39
  })
31
40
  }
32
41
 
@@ -46,10 +55,7 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
46
55
  onClick={(): void => handleDotClick(dot)}
47
56
  >
48
57
  {dot.icon.type === 'svg' && (
49
- <div
50
- className={styles.icon}
51
- dangerouslySetInnerHTML={{ __html: dot.icon.svg_string }}
52
- />
58
+ <div dangerouslySetInnerHTML={{ __html: dot.icon.svg_string }} />
53
59
  )}
54
60
  {dot.icon.type === 'number' && dot.icon.number}
55
61
  </button>
@@ -62,13 +68,21 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
62
68
  height={height}
63
69
  alt={credit}
64
70
  display={display}
71
+ fullscreen={{ mobile: false, desktop: false }}
65
72
  />
66
73
  </div>
67
74
 
68
75
  {popover.show && (
69
76
  <>
70
77
  {viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? (
71
- <div className={styles.popover}>
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
+ >
72
86
  <Footnote
73
87
  onClose={(): void => {
74
88
  setPopover({ show: false })
package/src/DotsOnImage/mock.json CHANGED
@@ -6,8 +6,8 @@
6
6
  "title": "Мафия и Голливуд",
7
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",
@@ -20,8 +20,8 @@
20
20
  "title": "Аль Капоне в кино",
21
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.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 CHANGED
@@ -21,7 +21,7 @@
21
21
  margin: 0 0 16px;
22
22
 
23
23
  font-size: inherit;
24
- font-weight: 600;
24
+ font-weight: 700;
25
25
  line-height: inherit;
26
26
  }
27
27
 
@@ -33,7 +33,6 @@
33
33
  margin-top: 6px;
34
34
  }
35
35
 
36
-
37
36
  .body a {
38
37
  color: inherit;
39
38
  box-shadow: inset 0 -1px $gold;
@@ -53,14 +52,14 @@
53
52
 
54
53
  cursor: pointer;
55
54
 
56
- color: #b3b3b3;
55
+ color: $ash;
57
56
  border-width: 0;
58
57
  outline: none;
59
58
  background-color: transparent;
60
59
  }
61
60
 
62
61
  .dismiss:hover {
63
- color: #757575;
62
+ color: $nikel;
64
63
  }
65
64
 
66
65
  .dismiss svg {
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"
package/src/Popover/Popover.module.css CHANGED
@@ -110,7 +110,7 @@
110
110
  margin: 0 0 5px;
111
111
 
112
112
  font-size: inherit;
113
- font-weight: 600;
113
+ font-weight: 700;
114
114
  line-height: inherit;
115
115
  }
116
116