@meduza/ui-kit-2 0.1.50 → 0.1.51

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 (15) hide show
  1. package/dist/Image/Image.types.d.ts +1 -0
  2. package/dist/ui-kit-2.cjs.development.js +42 -35
  3. package/dist/ui-kit-2.cjs.development.js.map +1 -1
  4. package/dist/ui-kit-2.cjs.production.min.js +1 -1
  5. package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
  6. package/dist/ui-kit-2.esm.js +42 -35
  7. package/dist/ui-kit-2.esm.js.map +1 -1
  8. package/dist/ui-kit.css +1024 -1024
  9. package/package.json +1 -1
  10. package/src/EmbedBlock/EmbedBlock.tsx +1 -0
  11. package/src/Image/Image.types.ts +1 -0
  12. package/src/Image/index.tsx +19 -4
  13. package/src/RawHtmlBlock/mock.json +4 -4
  14. package/src/RelatedRichBlock/mock.json +12 -12
  15. package/src/Spoiler/index.tsx +2 -2
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.1.50",
2
+ "version": "0.1.51",
3
3
  "license": "MIT",
4
4
  "description": "UIKit for Meduza",
5
5
  "repository": "https://github.com/meduza-corp/ui-kit-2.git",
package/src/EmbedBlock/EmbedBlock.tsx CHANGED
@@ -70,6 +70,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
70
70
  alt={block.data.caption}
71
71
  display={block.data.display}
72
72
  lazy={block.data.lazy}
73
+ fullscreen={block.data.fullscreen}
73
74
  styleContext={styleContext}
74
75
  />
75
76
  </div>
package/src/Image/Image.types.ts CHANGED
@@ -16,6 +16,7 @@ export interface ImageProps {
16
16
  source?: string[]
17
17
  lazy?: boolean
18
18
  ratio?: number
19
+ fullscreen?: boolean | undefined
19
20
  styleContext?: string[] | string
20
21
  }
21
22
 
package/src/Image/index.tsx CHANGED
@@ -4,6 +4,9 @@ import { makeClassName, ClassNames } from '../utils/makeClassName'
4
4
  import makeStyleContext from '../utils/makeStyleContext'
5
5
  import BlockContext from '../utils/BlockContext'
6
6
  import postMessage from '../utils/postMessage'
7
+ import viewportSize from '../utils/viewportSize'
8
+ import { MediaQuerySizes } from '../constants'
9
+
7
10
  import { Lazy } from '../Lazy'
8
11
  import RenderPicture from './RenderPicture'
9
12
 
@@ -18,13 +21,22 @@ export const Image: React.FC<ImageProps> = ({
18
21
  source,
19
22
  lazy,
20
23
  ratio,
21
- styleContext
24
+ styleContext,
25
+ fullscreen
22
26
  }) => {
23
27
  const { lightBox } = useContext(BlockContext)
24
- const [isLoaded, setIsLoaded] = useState(false)
28
+ const [isLoaded, setIsLoaded] = useState(lazy ? false : true)
25
29
 
26
30
  const handleClick = (): void => {
27
- if (!lightBox || (optimized && !optimized.original)) {
31
+ const { width: viewportWidth } = viewportSize()
32
+ const disableFullscreenDesktop =
33
+ viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen
34
+
35
+ if (
36
+ disableFullscreenDesktop ||
37
+ !lightBox ||
38
+ (optimized && !optimized.original)
39
+ ) {
28
40
  return
29
41
  }
30
42
 
@@ -49,7 +61,10 @@ export const Image: React.FC<ImageProps> = ({
49
61
  let classNames: ClassNames = [
50
62
  [styles.root, true],
51
63
  [styles.isLoaded, isLoaded],
52
- [styles.fullscreen, lightBox && optimized && optimized.original]
64
+ [
65
+ styles.fullscreen,
66
+ fullscreen && lightBox && optimized && optimized.original
67
+ ]
53
68
  ]
54
69
 
55
70
  if (styleContext) {
package/src/RawHtmlBlock/mock.json CHANGED
@@ -124,14 +124,14 @@
124
124
  "layout": "rich",
125
125
  "urls": {
126
126
  "w325": {
127
- "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
128
- "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
127
+ "1x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
128
+ "2x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
129
129
  "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
130
130
  "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
131
131
  },
132
132
  "w600": {
133
- "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
134
- "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
133
+ "1x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
134
+ "2x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
135
135
  "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
136
136
  "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
137
137
  }
package/src/RelatedRichBlock/mock.json CHANGED
@@ -23,14 +23,14 @@
23
23
  "layout": "rich",
24
24
  "urls": {
25
25
  "w325": {
26
- "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
27
- "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
26
+ "1x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
27
+ "2x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
28
28
  "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
29
29
  "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
30
30
  },
31
31
  "w600": {
32
- "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
33
- "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
32
+ "1x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
33
+ "2x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
34
34
  "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
35
35
  "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
36
36
  }
@@ -97,14 +97,14 @@
97
97
  "layout": "rich",
98
98
  "urls": {
99
99
  "w325": {
100
- "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
101
- "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
100
+ "1x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
101
+ "2x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
102
102
  "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
103
103
  "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
104
104
  },
105
105
  "w600": {
106
- "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
107
- "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
106
+ "1x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
107
+ "2x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
108
108
  "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
109
109
  "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
110
110
  }
@@ -171,14 +171,14 @@
171
171
  "layout": "rich",
172
172
  "urls": {
173
173
  "w325": {
174
- "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
175
- "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
174
+ "1x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
175
+ "2x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
176
176
  "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
177
177
  "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
178
178
  },
179
179
  "w600": {
180
- "1x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
181
- "2x": "http://meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
180
+ "1x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
181
+ "2x": "//meduza.io/image/attachments/images/006/087/556/elarge/E_3uGWnvssXzgtJ05-_Rfw.jpg",
182
182
  "1x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp",
183
183
  "2x_webp": "http://meduza.io/impro/MbBIK4vj9YMr8INLi6GMIYF4muqHFCWV0b1rxhhM6aI/fill/0/0/ce/1/aHR0cHM6Ly9tZWR1/emEuaW8vaW1hZ2Uv/YXR0YWNobWVudHMv/aW1hZ2VzLzAwNi8w/ODcvNTU2L2VsYXJn/ZS9FXzN1R1dudnNz/WHpndEowNS1fUmZ3/LmpwZw.webp"
184
184
  }
package/src/Spoiler/index.tsx CHANGED
@@ -4,7 +4,7 @@ import { makeClassName, ClassNames } from '../utils/makeClassName'
4
4
  import makeStyleContext from '../utils/makeStyleContext'
5
5
 
6
6
  import postMessage from '../utils/postMessage'
7
- import { RenderBlocks } from '../RenderBlocks'
7
+ import { RawHtmlBlock } from '../RawHtmlBlock'
8
8
  import { Button } from '../Button'
9
9
  import { SvgSymbol } from '../SvgSymbol'
10
10
 
@@ -60,7 +60,7 @@ export const Spoiler: React.FC<SpoilerProps> = ({
60
60
  <div className={styles.header}>{title && <h3>{title}</h3>}</div>
61
61
  <div className={styles.body}>
62
62
  {blocks.map((item) => (
63
- <RenderBlocks key={item.id} block={item} styleContext={context} />
63
+ <RawHtmlBlock key={item.id} block={item} styleContext={context} />
64
64
  ))}
65
65
  </div>
66
66
  <div className={styles.footer}>