;
+
/**
* Сalled on click.
*
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index 6d79bb39af..dcc372b146 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -5,6 +5,7 @@ import React from 'react'
import {
AutoControlledComponent as Component,
childrenUtils,
+ createHTMLIframe,
customPropTypes,
getElementType,
getUnhandledProps,
@@ -60,7 +61,7 @@ export default class Embed extends Component {
PropTypes.bool,
]),
- /** Specifies an icon to use with placeholder content. */
+ /** Specifies an icon to use with placeholder content. */
icon: customPropTypes.itemShorthand,
/** Specifies an id for source. */
@@ -69,6 +70,12 @@ export default class Embed extends Component {
PropTypes.string,
]),
+ /** Shorthand for HTML iframe. */
+ iframe: customPropTypes.every([
+ customPropTypes.demand(['source']),
+ customPropTypes.itemShorthand,
+ ]),
+
/**
* Сalled on click.
*
@@ -176,7 +183,7 @@ export default class Embed extends Component {
}
renderEmbed() {
- const { children, source } = this.props
+ const { children, iframe, source } = this.props
const { active } = this.state
if (!active) return null
@@ -184,15 +191,17 @@ export default class Embed extends Component {
return (
-
+ {createHTMLIframe(childrenUtils.isNil(iframe) ? this.getSrc() : iframe, {
+ defaultProps: {
+ allowFullScreen: false,
+ frameBorder: 0,
+ height: '100%',
+ scrolling: 'no',
+ src: this.getSrc(),
+ title: `Embedded content from ${source}.`,
+ width: '100%',
+ },
+ })}
)
}
diff --git a/test/specs/commonTests/implementsCommonProps.js b/test/specs/commonTests/implementsCommonProps.js
index acfede3a14..da351ecd2a 100644
--- a/test/specs/commonTests/implementsCommonProps.js
+++ b/test/specs/commonTests/implementsCommonProps.js
@@ -30,6 +30,27 @@ export const implementsButtonProp = (Component, options = {}) => {
})
}
+/**
+ * Assert that a Component correctly implements an HTML iframe shorthand prop.
+ *
+ * @param {function} Component The component to test.
+ * @param {object} [options={}]
+ * @param {string} [options.propKey='icon'] The name of the shorthand prop.
+ * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
+ * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
+ * @param {Object} [options.requiredProps={}] Props required to render the component.
+ * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
+ * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
+ */
+export const implementsHTMLIFrameProp = (Component, options = {}) => {
+ implementsShorthandProp(Component, {
+ propKey: 'iframe',
+ ShorthandComponent: 'iframe',
+ mapValueToProps: src => ({ src }),
+ ...options,
+ })
+}
+
/**
* Assert that a Component correctly implements an HTML input shorthand prop.
*
diff --git a/test/specs/modules/Embed/Embed-test.js b/test/specs/modules/Embed/Embed-test.js
index 1d9c61700a..cbccb46339 100644
--- a/test/specs/modules/Embed/Embed-test.js
+++ b/test/specs/modules/Embed/Embed-test.js
@@ -23,6 +23,23 @@ describe('Embed', () => {
requiredProps: { active: true },
})
+ common.implementsHTMLIFrameProp(Embed, {
+ alwaysPresent: true,
+ assertExactMatch: false,
+ requiredProps: {
+ active: true,
+ id: 'default-test-id',
+ source: 'youtube',
+ },
+ shorthandDefaultProps: {
+ allowFullScreen: false,
+ frameBorder: 0,
+ height: '100%',
+ scrolling: 'no',
+ title: 'Embedded content from youtube.',
+ width: '100%',
+ },
+ })
common.implementsIconProp(Embed)
common.propKeyOnlyToClassName(Embed, 'active')