feat(Embed): add iframe shorthand (#1810)

* feat(Embed): add iframe shorthand

* feat(Embed): add iframe shorthand

docs/app/Examples/modules/Embed/Usage/EmbedExampleIframe.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Embed } from 'semantic-ui-react'
+
+const EmbedExampleIframe = () => (
+  <Embed
+    autoplay={false}
+    brandedUI={false}
+    color='white'
+    hd={false}
+    id='gJscrxxl_Bg'
+    iframe={{
+      allowFullScreen: true,
+      style: {
+        padding: 10,
+      },
+    }}
+    placeholder='/assets/images/image-16by9.png'
+    source='youtube'
+  />
+)
+
+export default EmbedExampleIframe

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'
     />
+    <ComponentExample
+      title='Iframe'
+      description='You can pass props to a shorthand.'
+      examplePath='modules/Embed/Usage/EmbedExampleIframe'
+    />
   </ExampleSection>
 )
 

src/index.d.ts

@@ -17,6 +17,11 @@ export interface HtmlLabelProps {
   children?: React.ReactNode;
 }
 
+export interface HtmlIframeProps {
+  [key: string]: any;
+  src?: string;
+}
+
 export interface HtmlImageProps {
   [key: string]: any;
   src?: string;

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 }))

src/modules/Embed/Embed.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { SemanticShorthandItem } from '../..';
+import { HtmlIframeProps, SemanticShorthandItem } from '../..';
 import { IconProps } from '../../elements/Icon';
 
 export interface EmbedProps {
@@ -42,6 +42,9 @@ export interface EmbedProps {
   /** Specifies an id for source. */
   id?: string;
 
+  /** Shorthand for HTML iframe. */
+  iframe?: SemanticShorthandItem<HtmlIframeProps>;
+
   /**
    * Сalled on click.
    *

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,23 +183,25 @@ 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
     if (!childrenUtils.isNil(children)) return <div className='embed'>{children}</div>
 
     return (
       <div className='embed'>
-        <iframe
-          title={`Embedded content from ${source}.`}
-          allowFullScreen=''
-          frameBorder='0'
-          height='100%'
-          scrolling='no'
-          src={this.getSrc()}
-          width='100%'
-        />
+        {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%',
+          },
+        })}
       </div>
     )
   }

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.
  *

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')