diff --git a/docs/app/Examples/modules/Embed/Usage/EmbedExampleIframe.js b/docs/app/Examples/modules/Embed/Usage/EmbedExampleIframe.js
new file mode 100644
index 0000000000..8032af95dd
--- /dev/null
+++ b/docs/app/Examples/modules/Embed/Usage/EmbedExampleIframe.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Embed } from 'semantic-ui-react'
+
+const EmbedExampleIframe = () => (
+
+)
+
+export default EmbedExampleIframe
diff --git a/docs/app/Examples/modules/Embed/Usage/index.js b/docs/app/Examples/modules/Embed/Usage/index.js
index a101188b19..b178149f20 100644
--- a/docs/app/Examples/modules/Embed/Usage/index.js
+++ b/docs/app/Examples/modules/Embed/Usage/index.js
@@ -10,6 +10,11 @@ const EmbedUsageExamples = () => (
description='Settings to configure video behavior.'
examplePath='modules/Embed/Usage/EmbedExampleSettings'
/>
+
)
diff --git a/src/lib/factories.js b/src/lib/factories.js
index 4ce9ca5768..02b5078999 100644
--- a/src/lib/factories.js
+++ b/src/lib/factories.js
@@ -125,6 +125,7 @@ export function createShorthandFactory(Component, mapValueToProps) {
// HTML Factories
// ============================================================
export const createHTMLDivision = createShorthandFactory('div', val => ({ children: val }))
+export const createHTMLIframe = createShorthandFactory('iframe', src => ({ src }))
export const createHTMLImage = createShorthandFactory('img', val => ({ src: val }))
export const createHTMLInput = createShorthandFactory('input', val => ({ type: val }))
export const createHTMLLabel = createShorthandFactory('label', val => ({ children: val }))
diff --git a/src/modules/Embed/Embed.d.ts b/src/modules/Embed/Embed.d.ts
index ed5dc10d7e..ca0876ace0 100644
--- a/src/modules/Embed/Embed.d.ts
+++ b/src/modules/Embed/Embed.d.ts
@@ -39,6 +39,9 @@ export interface EmbedProps {
/** Specifies an id for source. */
id?: string;
+ /** Shorthand for HTML iframe. */
+ iframe?: any;
+
/**
* С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..f615efbc0d 100644
--- a/test/specs/modules/Embed/Embed-test.js
+++ b/test/specs/modules/Embed/Embed-test.js
@@ -23,6 +23,22 @@ describe('Embed', () => {
requiredProps: { active: true },
})
+ common.implementsHTMLIFrameProp(Embed, {
+ alwaysPresent: true,
+ 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')