@graphcommerce/graphcms-ui 3.0.10 → 3.0.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 3.0.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1392](https://github.com/graphcommerce-org/graphcommerce/pull/1392) [`123d441ac`](https://github.com/graphcommerce-org/graphcommerce/commit/123d441acb74706d08e453abae4a6a8dad3130e0) Thanks [@carlocarels90](https://github.com/carlocarels90)! - add missing fields to the iframe renderer
|
|
8
|
+
|
|
3
9
|
## 3.0.10
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -16,11 +16,22 @@ export const defaultRenderers: Renderers = {
|
|
|
16
16
|
'list-item': (props) => <Box component='li' {...props} />,
|
|
17
17
|
'list-item-child': (props) => <Box component='span' {...props} />,
|
|
18
18
|
'block-quote': (props) => <Box component='blockquote' {...props} />,
|
|
19
|
-
iframe: (props) =>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
iframe: (props) => {
|
|
20
|
+
const { url, width, height, sx = [] } = props
|
|
21
|
+
return (
|
|
22
|
+
// todo add security attributes to iframe
|
|
23
|
+
// todo make iframe responsive (generic IFrame component?)
|
|
24
|
+
<Box
|
|
25
|
+
component='iframe'
|
|
26
|
+
src={url}
|
|
27
|
+
loading='lazy'
|
|
28
|
+
sx={[
|
|
29
|
+
{ aspectRatio: `${width} / ${height}`, width: '100%' },
|
|
30
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
31
|
+
]}
|
|
32
|
+
/>
|
|
33
|
+
)
|
|
34
|
+
},
|
|
24
35
|
image: ({ src, width, height, title, mimeType }) => (
|
|
25
36
|
<Asset asset={{ url: src, alt: title, width, height, mimeType }} />
|
|
26
37
|
),
|
|
@@ -2,7 +2,7 @@ import { SxRenderer } from './types'
|
|
|
2
2
|
|
|
3
3
|
export const defaultSxRenderer: SxRenderer = {
|
|
4
4
|
all: {
|
|
5
|
-
'&:empty': {
|
|
5
|
+
'&:empty:not(iframe)': {
|
|
6
6
|
display: 'none',
|
|
7
7
|
},
|
|
8
8
|
},
|
|
@@ -104,4 +104,5 @@ export const defaultSxRenderer: SxRenderer = {
|
|
|
104
104
|
underlined: {
|
|
105
105
|
textDecoration: 'underline',
|
|
106
106
|
},
|
|
107
|
+
iframe: {},
|
|
107
108
|
}
|
|
@@ -69,7 +69,9 @@ type VideoElement = {
|
|
|
69
69
|
type IframeElement = {
|
|
70
70
|
type: 'iframe'
|
|
71
71
|
children: ElementOrTextNode[]
|
|
72
|
-
|
|
72
|
+
url: string
|
|
73
|
+
width?: number
|
|
74
|
+
height?: number
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
export type ElementNode = SimpleElement | LinkElement | ImageElement | VideoElement | IframeElement
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/graphcms-ui",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "3.0.
|
|
5
|
+
"version": "3.0.11",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|