@webstudio-is/sdk-components-react 0.91.0 → 0.92.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 (387) hide show
  1. package/lib/__generated__/blockquote.props.js +2 -4
  2. package/lib/__generated__/body.props.js +2 -4
  3. package/lib/__generated__/bold.props.js +2 -4
  4. package/lib/__generated__/box.props.js +2 -4
  5. package/lib/__generated__/button.props.js +2 -4
  6. package/lib/__generated__/checkbox.props.js +2 -4
  7. package/lib/__generated__/code-text.props.js +2 -4
  8. package/lib/__generated__/form.props.js +2 -4
  9. package/lib/__generated__/fragment.props.js +2 -4
  10. package/lib/__generated__/heading.props.js +2 -4
  11. package/lib/__generated__/html-embed.props.js +2 -4
  12. package/lib/__generated__/image.props.js +2 -4
  13. package/lib/__generated__/input.props.js +2 -4
  14. package/lib/__generated__/italic.props.js +2 -4
  15. package/lib/__generated__/label.props.js +2 -4
  16. package/lib/__generated__/link.props.js +2 -4
  17. package/lib/__generated__/list-item.props.js +2 -4
  18. package/lib/__generated__/list.props.js +2 -4
  19. package/lib/__generated__/paragraph.props.js +2 -4
  20. package/lib/__generated__/radio-button.props.js +2 -4
  21. package/lib/__generated__/rich-text-link.props.js +2 -4
  22. package/lib/__generated__/separator.props.js +2 -4
  23. package/lib/__generated__/slot.props.js +2 -4
  24. package/lib/__generated__/span.props.js +2 -4
  25. package/lib/__generated__/subscript.props.js +2 -4
  26. package/lib/__generated__/superscript.props.js +2 -4
  27. package/lib/__generated__/text.props.js +2 -4
  28. package/lib/__generated__/textarea.props.js +2 -4
  29. package/lib/__generated__/vimeo-play-button.props.js +2 -4
  30. package/lib/__generated__/vimeo-preview-image.props.js +2 -4
  31. package/lib/__generated__/vimeo-spinner.props.js +2 -4
  32. package/lib/__generated__/vimeo.props.js +2 -4
  33. package/lib/blockquote.js +3 -6
  34. package/lib/blockquote.stories.js +11 -0
  35. package/lib/blockquote.ws.js +3 -6
  36. package/lib/body.js +3 -6
  37. package/lib/body.stories.js +11 -0
  38. package/lib/body.ws.js +3 -6
  39. package/lib/bold.js +3 -6
  40. package/lib/bold.stories.js +11 -0
  41. package/lib/bold.ws.js +3 -6
  42. package/lib/box.js +3 -6
  43. package/lib/box.stories.js +11 -0
  44. package/lib/box.ws.js +3 -6
  45. package/lib/button.js +3 -6
  46. package/lib/button.stories.js +11 -0
  47. package/lib/button.ws.js +3 -6
  48. package/lib/checkbox.js +3 -6
  49. package/lib/checkbox.ws.js +3 -6
  50. package/lib/code-text.js +3 -6
  51. package/lib/code-text.stories.js +11 -0
  52. package/lib/code-text.ws.js +3 -6
  53. package/lib/components.js +33 -66
  54. package/lib/form.js +3 -6
  55. package/lib/form.stories.js +11 -0
  56. package/lib/form.ws.js +3 -6
  57. package/lib/fragment.js +2 -4
  58. package/lib/fragment.ws.js +3 -6
  59. package/lib/heading.js +2 -4
  60. package/lib/heading.stories.js +11 -0
  61. package/lib/heading.ws.js +3 -6
  62. package/lib/html-embed.js +2 -4
  63. package/lib/html-embed.stories.js +11 -0
  64. package/lib/html-embed.ws.js +3 -6
  65. package/lib/image.js +3 -6
  66. package/lib/image.stories.js +7 -0
  67. package/lib/image.ws.js +4 -8
  68. package/lib/input.js +3 -6
  69. package/lib/input.stories.js +9 -0
  70. package/lib/input.ws.js +9 -11
  71. package/lib/italic.js +3 -6
  72. package/lib/italic.stories.js +11 -0
  73. package/lib/italic.ws.js +3 -6
  74. package/lib/label.js +3 -6
  75. package/lib/label.ws.js +3 -6
  76. package/lib/link.js +3 -6
  77. package/lib/link.stories.js +11 -0
  78. package/lib/link.ws.js +3 -6
  79. package/lib/list-item.js +3 -6
  80. package/lib/list-item.stories.js +11 -0
  81. package/lib/list-item.ws.js +3 -6
  82. package/lib/list.js +2 -4
  83. package/lib/list.stories.js +13 -0
  84. package/lib/list.ws.js +3 -6
  85. package/lib/metas.js +33 -66
  86. package/lib/paragraph.js +3 -6
  87. package/lib/paragraph.stories.js +11 -0
  88. package/lib/paragraph.ws.js +3 -6
  89. package/lib/props.js +33 -66
  90. package/lib/radio-button.js +3 -6
  91. package/lib/radio-button.ws.js +9 -11
  92. package/lib/rich-text-link.js +2 -4
  93. package/lib/rich-text-link.stories.js +11 -0
  94. package/lib/rich-text-link.ws.js +3 -6
  95. package/lib/separator.js +3 -6
  96. package/lib/separator.stories.js +7 -0
  97. package/lib/separator.ws.js +3 -6
  98. package/lib/slot.js +2 -4
  99. package/lib/slot.stories.js +11 -0
  100. package/lib/slot.ws.js +3 -6
  101. package/lib/span.js +3 -6
  102. package/lib/span.stories.js +11 -0
  103. package/lib/span.ws.js +3 -6
  104. package/lib/subscript.js +3 -6
  105. package/lib/subscript.stories.js +11 -0
  106. package/lib/subscript.ws.js +3 -6
  107. package/lib/superscript.js +3 -6
  108. package/lib/superscript.stories.js +11 -0
  109. package/lib/superscript.ws.js +3 -6
  110. package/lib/text.js +3 -6
  111. package/lib/text.stories.js +11 -0
  112. package/lib/text.ws.js +3 -6
  113. package/lib/textarea.js +3 -6
  114. package/lib/textarea.ws.js +9 -11
  115. package/lib/types/__generated__/blockquote.props.d.ts +1 -1
  116. package/lib/types/__generated__/body.props.d.ts +1 -1
  117. package/lib/types/__generated__/bold.props.d.ts +1 -1
  118. package/lib/types/__generated__/box.props.d.ts +1 -1
  119. package/lib/types/__generated__/button.props.d.ts +1 -1
  120. package/lib/types/__generated__/checkbox.props.d.ts +1 -1
  121. package/lib/types/__generated__/code-text.props.d.ts +1 -1
  122. package/lib/types/__generated__/form.props.d.ts +1 -1
  123. package/lib/types/__generated__/fragment.props.d.ts +1 -1
  124. package/lib/types/__generated__/heading.props.d.ts +1 -1
  125. package/lib/types/__generated__/html-embed.props.d.ts +1 -1
  126. package/lib/types/__generated__/image.props.d.ts +1 -1
  127. package/lib/types/__generated__/input.props.d.ts +1 -1
  128. package/lib/types/__generated__/italic.props.d.ts +1 -1
  129. package/lib/types/__generated__/label.props.d.ts +1 -1
  130. package/lib/types/__generated__/link.props.d.ts +1 -1
  131. package/lib/types/__generated__/list-item.props.d.ts +1 -1
  132. package/lib/types/__generated__/list.props.d.ts +1 -1
  133. package/lib/types/__generated__/paragraph.props.d.ts +1 -1
  134. package/lib/types/__generated__/radio-button.props.d.ts +1 -1
  135. package/lib/types/__generated__/rich-text-link.props.d.ts +1 -1
  136. package/lib/types/__generated__/separator.props.d.ts +1 -1
  137. package/lib/types/__generated__/slot.props.d.ts +1 -1
  138. package/lib/types/__generated__/span.props.d.ts +1 -1
  139. package/lib/types/__generated__/subscript.props.d.ts +1 -1
  140. package/lib/types/__generated__/superscript.props.d.ts +1 -1
  141. package/lib/types/__generated__/text.props.d.ts +1 -1
  142. package/lib/types/__generated__/textarea.props.d.ts +1 -1
  143. package/lib/types/__generated__/vimeo-play-button.props.d.ts +1 -1
  144. package/lib/types/__generated__/vimeo-preview-image.props.d.ts +1 -1
  145. package/lib/types/__generated__/vimeo-spinner.props.d.ts +1 -1
  146. package/lib/types/__generated__/vimeo.props.d.ts +1 -1
  147. package/lib/types/vimeo-preview-image.d.ts +1 -1
  148. package/lib/vimeo-play-button.js +3 -5
  149. package/lib/vimeo-play-button.stories.js +11 -0
  150. package/lib/vimeo-play-button.ws.js +3 -6
  151. package/lib/vimeo-preview-image.js +2 -4
  152. package/lib/vimeo-preview-image.stories.js +11 -0
  153. package/lib/vimeo-preview-image.ws.js +3 -6
  154. package/lib/vimeo-spinner.js +2 -4
  155. package/lib/vimeo-spinner.stories.js +11 -0
  156. package/lib/vimeo-spinner.ws.js +3 -6
  157. package/lib/vimeo.js +3 -6
  158. package/lib/vimeo.stories.js +11 -0
  159. package/lib/vimeo.ws.js +3 -6
  160. package/package.json +16 -20
  161. package/lib/cjs/__generated__/blockquote.props.js +0 -536
  162. package/lib/cjs/__generated__/body.props.js +0 -530
  163. package/lib/cjs/__generated__/bold.props.js +0 -530
  164. package/lib/cjs/__generated__/box.props.js +0 -549
  165. package/lib/cjs/__generated__/button.props.js +0 -586
  166. package/lib/cjs/__generated__/checkbox.props.js +0 -688
  167. package/lib/cjs/__generated__/code-text.props.js +0 -530
  168. package/lib/cjs/__generated__/form.props.js +0 -578
  169. package/lib/cjs/__generated__/fragment.props.js +0 -24
  170. package/lib/cjs/__generated__/heading.props.js +0 -538
  171. package/lib/cjs/__generated__/html-embed.props.js +0 -31
  172. package/lib/cjs/__generated__/image.props.js +0 -603
  173. package/lib/cjs/__generated__/input.props.js +0 -695
  174. package/lib/cjs/__generated__/italic.props.js +0 -530
  175. package/lib/cjs/__generated__/label.props.js +0 -542
  176. package/lib/cjs/__generated__/link.props.js +0 -584
  177. package/lib/cjs/__generated__/list-item.props.js +0 -530
  178. package/lib/cjs/__generated__/list.props.js +0 -556
  179. package/lib/cjs/__generated__/paragraph.props.js +0 -530
  180. package/lib/cjs/__generated__/radio-button.props.js +0 -688
  181. package/lib/cjs/__generated__/rich-text-link.props.js +0 -584
  182. package/lib/cjs/__generated__/separator.props.js +0 -530
  183. package/lib/cjs/__generated__/slot.props.js +0 -24
  184. package/lib/cjs/__generated__/span.props.js +0 -530
  185. package/lib/cjs/__generated__/subscript.props.js +0 -530
  186. package/lib/cjs/__generated__/superscript.props.js +0 -530
  187. package/lib/cjs/__generated__/text.props.js +0 -538
  188. package/lib/cjs/__generated__/textarea.props.js +0 -597
  189. package/lib/cjs/__generated__/vimeo-play-button.props.js +0 -585
  190. package/lib/cjs/__generated__/vimeo-preview-image.props.js +0 -602
  191. package/lib/cjs/__generated__/vimeo-spinner.props.js +0 -530
  192. package/lib/cjs/__generated__/vimeo.props.js +0 -687
  193. package/lib/cjs/blockquote.js +0 -32
  194. package/lib/cjs/blockquote.ws.js +0 -96
  195. package/lib/cjs/body.js +0 -29
  196. package/lib/cjs/body.ws.js +0 -52
  197. package/lib/cjs/bold.js +0 -29
  198. package/lib/cjs/bold.ws.js +0 -42
  199. package/lib/cjs/box.js +0 -32
  200. package/lib/cjs/box.ws.js +0 -54
  201. package/lib/cjs/button.js +0 -31
  202. package/lib/cjs/button.ws.js +0 -57
  203. package/lib/cjs/checkbox.js +0 -29
  204. package/lib/cjs/checkbox.ws.js +0 -78
  205. package/lib/cjs/code-text.js +0 -30
  206. package/lib/cjs/code-text.ws.js +0 -75
  207. package/lib/cjs/components.js +0 -86
  208. package/lib/cjs/form.js +0 -29
  209. package/lib/cjs/form.ws.js +0 -84
  210. package/lib/cjs/fragment.js +0 -29
  211. package/lib/cjs/fragment.ws.js +0 -33
  212. package/lib/cjs/heading.js +0 -31
  213. package/lib/cjs/heading.ws.js +0 -58
  214. package/lib/cjs/html-embed.js +0 -80
  215. package/lib/cjs/html-embed.ws.js +0 -51
  216. package/lib/cjs/image.js +0 -86
  217. package/lib/cjs/image.ws.js +0 -70
  218. package/lib/cjs/input.js +0 -29
  219. package/lib/cjs/input.ws.js +0 -63
  220. package/lib/cjs/italic.js +0 -29
  221. package/lib/cjs/italic.ws.js +0 -48
  222. package/lib/cjs/label.js +0 -29
  223. package/lib/cjs/label.ws.js +0 -61
  224. package/lib/cjs/link.js +0 -52
  225. package/lib/cjs/link.ws.js +0 -81
  226. package/lib/cjs/list-item.js +0 -32
  227. package/lib/cjs/list-item.ws.js +0 -53
  228. package/lib/cjs/list.js +0 -31
  229. package/lib/cjs/list.ws.js +0 -74
  230. package/lib/cjs/metas.js +0 -86
  231. package/lib/cjs/package.json +0 -1
  232. package/lib/cjs/paragraph.js +0 -29
  233. package/lib/cjs/paragraph.ws.js +0 -53
  234. package/lib/cjs/props.js +0 -86
  235. package/lib/cjs/radio-button.js +0 -29
  236. package/lib/cjs/radio-button.ws.js +0 -78
  237. package/lib/cjs/rich-text-link.js +0 -28
  238. package/lib/cjs/rich-text-link.ws.js +0 -32
  239. package/lib/cjs/separator.js +0 -32
  240. package/lib/cjs/separator.ws.js +0 -71
  241. package/lib/cjs/slot.js +0 -36
  242. package/lib/cjs/slot.ws.js +0 -37
  243. package/lib/cjs/span.js +0 -29
  244. package/lib/cjs/span.ws.js +0 -42
  245. package/lib/cjs/subscript.js +0 -29
  246. package/lib/cjs/subscript.ws.js +0 -42
  247. package/lib/cjs/superscript.js +0 -29
  248. package/lib/cjs/superscript.ws.js +0 -42
  249. package/lib/cjs/text.js +0 -32
  250. package/lib/cjs/text.ws.js +0 -58
  251. package/lib/cjs/textarea.js +0 -29
  252. package/lib/cjs/textarea.ws.js +0 -64
  253. package/lib/cjs/vimeo-play-button.js +0 -38
  254. package/lib/cjs/vimeo-play-button.ws.js +0 -46
  255. package/lib/cjs/vimeo-preview-image.js +0 -40
  256. package/lib/cjs/vimeo-preview-image.ws.js +0 -37
  257. package/lib/cjs/vimeo-spinner.js +0 -37
  258. package/lib/cjs/vimeo-spinner.ws.js +0 -44
  259. package/lib/cjs/vimeo.js +0 -294
  260. package/lib/cjs/vimeo.ws.js +0 -348
  261. package/src/LICENSE +0 -661
  262. package/src/__generated__/blockquote.props.ts +0 -580
  263. package/src/__generated__/body.props.ts +0 -573
  264. package/src/__generated__/bold.props.ts +0 -573
  265. package/src/__generated__/box.props.ts +0 -593
  266. package/src/__generated__/button.props.ts +0 -636
  267. package/src/__generated__/checkbox.props.ts +0 -748
  268. package/src/__generated__/code-text.props.ts +0 -573
  269. package/src/__generated__/form.props.ts +0 -628
  270. package/src/__generated__/fragment.props.ts +0 -3
  271. package/src/__generated__/heading.props.ts +0 -582
  272. package/src/__generated__/html-embed.props.ts +0 -10
  273. package/src/__generated__/image.props.ts +0 -648
  274. package/src/__generated__/input.props.ts +0 -756
  275. package/src/__generated__/italic.props.ts +0 -573
  276. package/src/__generated__/label.props.ts +0 -586
  277. package/src/__generated__/link.props.ts +0 -630
  278. package/src/__generated__/list-item.props.ts +0 -573
  279. package/src/__generated__/list.props.ts +0 -601
  280. package/src/__generated__/paragraph.props.ts +0 -573
  281. package/src/__generated__/radio-button.props.ts +0 -748
  282. package/src/__generated__/rich-text-link.props.ts +0 -630
  283. package/src/__generated__/separator.props.ts +0 -573
  284. package/src/__generated__/slot.props.ts +0 -3
  285. package/src/__generated__/span.props.ts +0 -573
  286. package/src/__generated__/subscript.props.ts +0 -573
  287. package/src/__generated__/superscript.props.ts +0 -573
  288. package/src/__generated__/text.props.ts +0 -582
  289. package/src/__generated__/textarea.props.ts +0 -645
  290. package/src/__generated__/vimeo-play-button.props.ts +0 -634
  291. package/src/__generated__/vimeo-preview-image.props.ts +0 -647
  292. package/src/__generated__/vimeo-spinner.props.ts +0 -573
  293. package/src/__generated__/vimeo.props.ts +0 -751
  294. package/src/blockquote.stories.tsx +0 -13
  295. package/src/blockquote.tsx +0 -18
  296. package/src/blockquote.ws.tsx +0 -84
  297. package/src/body.stories.tsx +0 -13
  298. package/src/body.tsx +0 -10
  299. package/src/body.ws.tsx +0 -37
  300. package/src/bold.stories.tsx +0 -13
  301. package/src/bold.tsx +0 -10
  302. package/src/bold.ws.tsx +0 -27
  303. package/src/box.stories.tsx +0 -13
  304. package/src/box.tsx +0 -32
  305. package/src/box.ws.ts +0 -54
  306. package/src/button.stories.tsx +0 -13
  307. package/src/button.tsx +0 -15
  308. package/src/button.ws.tsx +0 -43
  309. package/src/checkbox.tsx +0 -13
  310. package/src/checkbox.ws.tsx +0 -64
  311. package/src/code-text.stories.tsx +0 -13
  312. package/src/code-text.tsx +0 -17
  313. package/src/code-text.ws.tsx +0 -61
  314. package/src/components.ts +0 -32
  315. package/src/form.stories.tsx +0 -13
  316. package/src/form.tsx +0 -14
  317. package/src/form.ws.tsx +0 -69
  318. package/src/fragment.tsx +0 -11
  319. package/src/fragment.ws.ts +0 -15
  320. package/src/heading.stories.tsx +0 -13
  321. package/src/heading.tsx +0 -21
  322. package/src/heading.ws.tsx +0 -47
  323. package/src/html-embed.stories.tsx +0 -13
  324. package/src/html-embed.tsx +0 -99
  325. package/src/html-embed.ws.ts +0 -34
  326. package/src/image.stories.tsx +0 -9
  327. package/src/image.tsx +0 -91
  328. package/src/image.ws.tsx +0 -58
  329. package/src/input.stories.tsx +0 -11
  330. package/src/input.tsx +0 -13
  331. package/src/input.ws.tsx +0 -49
  332. package/src/italic.stories.tsx +0 -13
  333. package/src/italic.tsx +0 -10
  334. package/src/italic.ws.tsx +0 -33
  335. package/src/label.tsx +0 -10
  336. package/src/label.ws.tsx +0 -46
  337. package/src/link.stories.tsx +0 -13
  338. package/src/link.tsx +0 -43
  339. package/src/link.ws.tsx +0 -67
  340. package/src/list-item.stories.tsx +0 -13
  341. package/src/list-item.tsx +0 -18
  342. package/src/list-item.ws.tsx +0 -38
  343. package/src/list.stories.tsx +0 -14
  344. package/src/list.tsx +0 -27
  345. package/src/list.ws.tsx +0 -59
  346. package/src/metas.ts +0 -32
  347. package/src/paragraph.stories.tsx +0 -13
  348. package/src/paragraph.tsx +0 -10
  349. package/src/paragraph.ws.tsx +0 -38
  350. package/src/props.ts +0 -32
  351. package/src/radio-button.tsx +0 -13
  352. package/src/radio-button.ws.tsx +0 -64
  353. package/src/rich-text-link.stories.tsx +0 -13
  354. package/src/rich-text-link.tsx +0 -8
  355. package/src/rich-text-link.ws.tsx +0 -14
  356. package/src/separator.stories.tsx +0 -9
  357. package/src/separator.tsx +0 -18
  358. package/src/separator.ws.tsx +0 -58
  359. package/src/slot.stories.tsx +0 -13
  360. package/src/slot.tsx +0 -17
  361. package/src/slot.ws.ts +0 -20
  362. package/src/span.stories.tsx +0 -13
  363. package/src/span.tsx +0 -10
  364. package/src/span.ws.tsx +0 -27
  365. package/src/subscript.stories.tsx +0 -13
  366. package/src/subscript.tsx +0 -10
  367. package/src/subscript.ws.tsx +0 -27
  368. package/src/superscript.stories.tsx +0 -13
  369. package/src/superscript.tsx +0 -10
  370. package/src/superscript.ws.tsx +0 -27
  371. package/src/text.stories.tsx +0 -13
  372. package/src/text.tsx +0 -22
  373. package/src/text.ws.tsx +0 -44
  374. package/src/textarea.tsx +0 -13
  375. package/src/textarea.ws.tsx +0 -50
  376. package/src/vimeo-play-button.stories.tsx +0 -13
  377. package/src/vimeo-play-button.tsx +0 -24
  378. package/src/vimeo-play-button.ws.ts +0 -30
  379. package/src/vimeo-preview-image.stories.tsx +0 -13
  380. package/src/vimeo-preview-image.tsx +0 -30
  381. package/src/vimeo-preview-image.ws.ts +0 -22
  382. package/src/vimeo-spinner.stories.tsx +0 -13
  383. package/src/vimeo-spinner.tsx +0 -25
  384. package/src/vimeo-spinner.ws.ts +0 -28
  385. package/src/vimeo.stories.tsx +0 -13
  386. package/src/vimeo.tsx +0 -431
  387. package/src/vimeo.ws.ts +0 -335
package/src/vimeo.ws.ts DELETED
@@ -1,335 +0,0 @@
1
- import { PlayIcon, SpinnerIcon, VimeoIcon } from "@webstudio-is/icons/svg";
2
- import {
3
- defaultStates,
4
- type PresetStyle,
5
- type WsComponentMeta,
6
- type WsComponentPropsMeta,
7
- } from "@webstudio-is/react-sdk";
8
- import { div } from "@webstudio-is/react-sdk/css-normalize";
9
- import { props } from "./__generated__/vimeo.props";
10
- import { Vimeo } from "./vimeo";
11
- import type { ComponentProps } from "react";
12
-
13
- const presetStyle = {
14
- div,
15
- } satisfies PresetStyle<"div">;
16
-
17
- export const meta: WsComponentMeta = {
18
- category: "media",
19
- type: "container",
20
- label: "Vimeo",
21
- description:
22
- "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
23
- order: 1,
24
- icon: VimeoIcon,
25
- states: defaultStates,
26
- presetStyle,
27
- template: [
28
- {
29
- type: "instance",
30
- component: "Vimeo",
31
- styles: [
32
- {
33
- property: "position",
34
- value: { type: "keyword", value: "relative" },
35
- },
36
- {
37
- property: "aspectRatio",
38
- value: { type: "keyword", value: "640/360" },
39
- },
40
- {
41
- property: "width",
42
- value: { type: "unit", value: 100, unit: "%" },
43
- },
44
- ],
45
- children: [
46
- {
47
- type: "instance",
48
- component: "VimeoPreviewImage",
49
- styles: [
50
- {
51
- property: "position",
52
- value: { type: "keyword", value: "absolute" },
53
- },
54
- {
55
- property: "objectFit",
56
- value: { type: "keyword", value: "cover" },
57
- },
58
- {
59
- property: "width",
60
- value: { type: "unit", value: 100, unit: "%" },
61
- },
62
- {
63
- property: "height",
64
- value: { type: "unit", value: 100, unit: "%" },
65
- },
66
- {
67
- property: "borderTopLeftRadius",
68
- value: { type: "unit", value: 20, unit: "px" },
69
- },
70
- {
71
- property: "borderTopRightRadius",
72
- value: { type: "unit", value: 20, unit: "px" },
73
- },
74
- {
75
- property: "borderBottomLeftRadius",
76
- value: { type: "unit", value: 20, unit: "px" },
77
- },
78
- {
79
- property: "borderBottomRightRadius",
80
- value: { type: "unit", value: 20, unit: "px" },
81
- },
82
- {
83
- property: "objectPosition",
84
- value: { type: "keyword", value: "cover" },
85
- },
86
- ],
87
- children: [],
88
- props: [
89
- {
90
- type: "string",
91
- name: "alt",
92
- value: "Vimeo video preview image",
93
- },
94
- {
95
- type: "string",
96
- name: "sizes",
97
- value: "100vw",
98
- },
99
- ],
100
- },
101
- {
102
- type: "instance",
103
- component: "Box",
104
- label: "Spinner",
105
- styles: [
106
- {
107
- property: "position",
108
- value: { type: "keyword", value: "absolute" },
109
- },
110
- {
111
- property: "top",
112
- value: { type: "unit", value: 50, unit: "%" },
113
- },
114
- {
115
- property: "left",
116
- value: { type: "unit", value: 50, unit: "%" },
117
- },
118
- {
119
- property: "width",
120
- value: { type: "unit", value: 70, unit: "px" },
121
- },
122
- {
123
- property: "height",
124
- value: { type: "unit", value: 70, unit: "px" },
125
- },
126
- {
127
- property: "marginTop",
128
- value: { type: "unit", value: -35, unit: "px" },
129
- },
130
- {
131
- property: "marginLeft",
132
- value: { type: "unit", value: -35, unit: "px" },
133
- },
134
- ],
135
- children: [
136
- {
137
- type: "instance",
138
- component: "HtmlEmbed",
139
- label: "Spinner SVG",
140
- props: [
141
- {
142
- type: "string",
143
- name: "code",
144
- value: SpinnerIcon,
145
- },
146
- ],
147
- children: [],
148
- },
149
- ],
150
- },
151
- {
152
- type: "instance",
153
- component: "VimeoPlayButton",
154
- props: [
155
- {
156
- type: "string",
157
- name: "aria-label",
158
- value: "Play button",
159
- },
160
- ],
161
- styles: [
162
- {
163
- property: "position",
164
- value: { type: "keyword", value: "absolute" },
165
- },
166
- {
167
- property: "width",
168
- value: { type: "unit", value: 140, unit: "px" },
169
- },
170
- {
171
- property: "height",
172
- value: { type: "unit", value: 80, unit: "px" },
173
- },
174
- {
175
- property: "top",
176
- value: { type: "unit", value: 50, unit: "%" },
177
- },
178
- {
179
- property: "left",
180
- value: { type: "unit", value: 50, unit: "%" },
181
- },
182
- {
183
- property: "marginTop",
184
- value: { type: "unit", value: -40, unit: "px" },
185
- },
186
- {
187
- property: "marginLeft",
188
- value: { type: "unit", value: -70, unit: "px" },
189
- },
190
- {
191
- property: "display",
192
- value: { type: "keyword", value: "flex" },
193
- },
194
- {
195
- property: "alignItems",
196
- value: { type: "keyword", value: "center" },
197
- },
198
- {
199
- property: "justifyContent",
200
- value: { type: "keyword", value: "center" },
201
- },
202
- {
203
- property: "borderTopStyle",
204
- value: { type: "keyword", value: "none" },
205
- },
206
- {
207
- property: "borderRightStyle",
208
- value: { type: "keyword", value: "none" },
209
- },
210
- {
211
- property: "borderBottomStyle",
212
- value: { type: "keyword", value: "none" },
213
- },
214
- {
215
- property: "borderLeftStyle",
216
- value: { type: "keyword", value: "none" },
217
- },
218
- {
219
- property: "borderTopLeftRadius",
220
- value: { type: "unit", value: 5, unit: "px" },
221
- },
222
- {
223
- property: "borderTopRightRadius",
224
- value: { type: "unit", value: 5, unit: "px" },
225
- },
226
- {
227
- property: "borderBottomLeftRadius",
228
- value: { type: "unit", value: 5, unit: "px" },
229
- },
230
- {
231
- property: "borderBottomRightRadius",
232
- value: { type: "unit", value: 5, unit: "px" },
233
- },
234
- {
235
- property: "cursor",
236
- value: { type: "keyword", value: "pointer" },
237
- },
238
- {
239
- property: "backgroundColor",
240
- value: {
241
- type: "rgb",
242
- r: 18,
243
- g: 18,
244
- b: 18,
245
- alpha: 1,
246
- },
247
- },
248
- {
249
- property: "color",
250
- value: {
251
- type: "rgb",
252
- r: 255,
253
- g: 255,
254
- b: 255,
255
- alpha: 1,
256
- },
257
- },
258
- {
259
- state: ":hover",
260
- property: "backgroundColor",
261
- value: {
262
- type: "rgb",
263
- r: 0,
264
- g: 173,
265
- b: 239,
266
- alpha: 1,
267
- },
268
- },
269
- ],
270
- children: [
271
- {
272
- type: "instance",
273
- component: "Box",
274
- label: "Play Icon",
275
- styles: [
276
- {
277
- property: "width",
278
- value: { type: "unit", value: 60, unit: "px" },
279
- },
280
- {
281
- property: "height",
282
- value: { type: "unit", value: 60, unit: "px" },
283
- },
284
- ],
285
- props: [
286
- {
287
- type: "string",
288
- name: "aria-hidden",
289
- value: "true",
290
- },
291
- ],
292
- children: [
293
- {
294
- type: "instance",
295
- component: "HtmlEmbed",
296
- label: "Play SVG",
297
- props: [
298
- {
299
- type: "string",
300
- name: "code",
301
- value: PlayIcon,
302
- },
303
- ],
304
- children: [],
305
- },
306
- ],
307
- },
308
- ],
309
- },
310
- ],
311
- },
312
- ],
313
- };
314
-
315
- const initialProps: Array<keyof ComponentProps<typeof Vimeo>> = [
316
- "id",
317
- "url",
318
- "quality",
319
- "showPreview",
320
- "autoplay",
321
- "backgroundMode",
322
- "doNotTrack",
323
- "loop",
324
- "muted",
325
- "showPortrait",
326
- "showByline",
327
- "showTitle",
328
- "showControls",
329
- "controlsColor",
330
- ];
331
-
332
- export const propsMeta: WsComponentPropsMeta = {
333
- props,
334
- initialProps,
335
- };