feat(Embed): Add component (#783)

* feat(Embed): Add component

feat(Embed): Add component

feat(Embed): Add component

feat(Embed): Add component

feat(Embed): Add component

feat(Embed): Add component

feat(Embed): Add tests

feat(Embed): Add tests

feat(Embed): Add component

feat(Embed): Add component

* feat(Embed): Update prop names

README.md

@@ -109,7 +109,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
 | ✓ Container     | ✓ Form          | ✓ Card          | ✓ Checkbox      | *API (NA)*         |
 | ✓ Divider       | ✓ Grid          | ✓ Comment       | ✓ Dimmer        | *Visibility (NA)*  |
 | ✓ Flag          | ✓ Menu          | ✓ Feed          | ✓ Dropdown      |                    |
-| ✓ Header        | ✓ Message       | ✓ Item          |   Embed         |                    |
+| ✓ Header        | ✓ Message       | ✓ Item          | ✓ Embed         |                    |
 | ✓ Icon          | ✓ Table         | ✓ Statistic     | ✓ Modal         |                    |
 | ✓ Image         |                 |                 |   Nag           |                    |
 | ✓ Input         |                 |                 | ✓ Popup         |                    |

docs/app/Examples/modules/Embed/States/EmbedExampleActive.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { Button, Divider, Embed } from 'semantic-ui-react'
+
+export default class EmbedExampleActive extends Component {
+  state = {}
+
+  handleClick = () => this.setState({ active: true })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Embed
+          active={active}
+          icon='arrow circle down'
+          placeholder='http://semantic-ui.com/images/image-16by9.png'
+          source='youtube'
+          sourceId='90Omh7_I8vI'
+        />
+
+        <Divider hidden />
+
+        <Button
+          content='Activate'
+          icon='bomb'
+          labelPosition='left'
+          onClick={this.handleClick}
+        />
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Embed/States/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const EmbedStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Active'
+      description='An embed can be active.'
+      examplePath='modules/Embed/States/EmbedExampleActive'
+    />
+  </ExampleSection>
+)
+
+export default EmbedStatesExamples

docs/app/Examples/modules/Embed/Types/EmbedExampleCustom.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Embed } from 'semantic-ui-react'
+
+const EmbedExampleCustom = () => (
+  <Embed
+    icon='right circle arrow'
+    placeholder='http://semantic-ui.com/images/image-16by9.png'
+    sourceUrl='http://www.myfav.es/jack'
+  />
+)
+
+export default EmbedExampleCustom

docs/app/Examples/modules/Embed/Types/EmbedExampleVimeo.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Embed } from 'semantic-ui-react'
+
+const EmbedExampleVimeo = () => (
+  <Embed
+    placeholder='http://semantic-ui.com/images/vimeo-example.jpg'
+    source='vimeo'
+    sourceId='125292332'
+  />
+)
+
+export default EmbedExampleVimeo

docs/app/Examples/modules/Embed/Types/EmbedExampleYoutube.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Embed } from 'semantic-ui-react'
+
+const EmbedExampleYouTube = () => (
+  <Embed
+    placeholder='http://semantic-ui.com/images/image-16by9.png'
+    source='youtube'
+    sourceId='O6Xo21L0ybE'
+  />
+)
+
+export default EmbedExampleYouTube

docs/app/Examples/modules/Embed/Types/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Message } from 'semantic-ui-react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const EmbedTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='YouTube'
+      description='An embed can be used to display YouTube Content.'
+      examplePath='modules/Embed/Types/EmbedExampleYoutube'
+    />
+    <ComponentExample
+      title='Vimeo'
+      description='An embed can be used to display Vimeo content.'
+      examplePath='modules/Embed/Types/EmbedExampleVimeo'
+    />
+    <ComponentExample
+      title='Custom Content'
+      description='An embed can display any web content.'
+      examplePath='modules/Embed/Types/EmbedExampleCustom'
+    >
+      <Message info>
+        Embeds use an intrinsic aspect ratios to embed content responsively. Content will preserve their intrinsic
+        aspect ratio for all browser sizes responsively
+      </Message>
+    </ComponentExample>
+  </ExampleSection>
+)
+
+export default EmbedTypesExamples

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Embed } from 'semantic-ui-react'
+
+const EmbedExampleSettings = () => (
+  <Embed
+    placeholder='http://semantic-ui.com/images/image-16by9.png'
+    source='youtube'
+    sourceId='D0WnZyxp_Wo'
+    sourceSettings={{
+      autoPlay: false,
+      brandedUI: false,
+      color: 'white',
+      hd: false,
+    }}
+  />
+)
+
+export default EmbedExampleSettings

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

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const EmbedUsageExamples = () => (
+  <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Source settings'
+      description='Settings to configure video behavior.'
+      examplePath='modules/Embed/Usage/EmbedExampleSettings'
+    />
+  </ExampleSection>
+)
+
+export default EmbedUsageExamples

docs/app/Examples/modules/Embed/Variations/EmbedExampleAspectRatio.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Embed } from 'semantic-ui-react'
+
+const EmbedExampleAspectRatio = () => (
+  <Embed
+    aspectRatio='4:3'
+    placeholder='http://semantic-ui.com/images/4by3.jpg'
+    source='youtube'
+    sourceId='HTZudKi36bo'
+  />
+)
+
+export default EmbedExampleAspectRatio

docs/app/Examples/modules/Embed/Variations/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const EmbedVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Aspect Ratio'
+      description='An embed can specify an alternative aspect ratio.'
+      examplePath='modules/Embed/Variations/EmbedExampleAspectRatio'
+    />
+  </ExampleSection>
+)
+
+export default EmbedVariationsExamples

docs/app/Examples/modules/Embed/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import States from './States'
+import Types from './Types'
+import Variations from './Variations'
+import Usage from './Usage'
+
+const EmbedExamples = () => (
+  <div>
+    <Types />
+    <States />
+    <Variations />
+    <Usage />
+  </div>
+)
+
+export default EmbedExamples

src/index.js

@@ -112,6 +112,8 @@ export { default as DropdownHeader } from './modules/Dropdown/DropdownHeader'
 export { default as DropdownItem } from './modules/Dropdown/DropdownItem'
 export { default as DropdownMenu } from './modules/Dropdown/DropdownMenu'
 
+export { default as Embed } from './modules/Embed'
+
 export { default as Modal } from './modules/Modal'
 export { default as ModalActions } from './modules/Modal/ModalActions'
 export { default as ModalContent } from './modules/Modal/ModalContent'