Skip to content

Commit 8d01cc6

Browse files
layershifterlevithomason
layershifter
authored and
levithomason
committed
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
1 parent 13a800f commit 8d01cc6

16 files changed

Lines changed: 562 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
109109
| ✓ Container | ✓ Form | ✓ Card | ✓ Checkbox | *API (NA)* |
110110
| ✓ Divider | ✓ Grid | ✓ Comment | ✓ Dimmer | *Visibility (NA)* |
111111
| ✓ Flag | ✓ Menu | ✓ Feed | ✓ Dropdown | |
112-
| ✓ Header | ✓ Message | ✓ Item | Embed | |
112+
| ✓ Header | ✓ Message | ✓ Item | ✓ Embed | |
113113
| ✓ Icon | ✓ Table | ✓ Statistic | ✓ Modal | |
114114
| ✓ Image | | | Nag | |
115115
| ✓ Input | | | ✓ Popup | |

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { Component } from 'react'
2+
import { Button, Divider, Embed } from 'semantic-ui-react'
3+
4+
export default class EmbedExampleActive extends Component {
5+
state = {}
6+
7+
handleClick = () => this.setState({ active: true })
8+
9+
render() {
10+
const { active } = this.state
11+
12+
return (
13+
<div>
14+
<Embed
15+
active={active}
16+
icon='arrow circle down'
17+
placeholder='http://semantic-ui.com/images/image-16by9.png'
18+
source='youtube'
19+
sourceId='90Omh7_I8vI'
20+
/>
21+
22+
<Divider hidden />
23+
24+
<Button
25+
content='Activate'
26+
icon='bomb'
27+
labelPosition='left'
28+
onClick={this.handleClick}
29+
/>
30+
</div>
31+
)
32+
}
33+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
3+
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
4+
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
5+
6+
const EmbedStatesExamples = () => (
7+
<ExampleSection title='States'>
8+
<ComponentExample
9+
title='Active'
10+
description='An embed can be active.'
11+
examplePath='modules/Embed/States/EmbedExampleActive'
12+
/>
13+
</ExampleSection>
14+
)
15+
16+
export default EmbedStatesExamples

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { Embed } from 'semantic-ui-react'
3+
4+
const EmbedExampleCustom = () => (
5+
<Embed
6+
icon='right circle arrow'
7+
placeholder='http://semantic-ui.com/images/image-16by9.png'
8+
sourceUrl='http://www.myfav.es/jack'
9+
/>
10+
)
11+
12+
export default EmbedExampleCustom

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { Embed } from 'semantic-ui-react'
3+
4+
const EmbedExampleVimeo = () => (
5+
<Embed
6+
placeholder='http://semantic-ui.com/images/vimeo-example.jpg'
7+
source='vimeo'
8+
sourceId='125292332'
9+
/>
10+
)
11+
12+
export default EmbedExampleVimeo

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { Embed } from 'semantic-ui-react'
3+
4+
const EmbedExampleYouTube = () => (
5+
<Embed
6+
placeholder='http://semantic-ui.com/images/image-16by9.png'
7+
source='youtube'
8+
sourceId='O6Xo21L0ybE'
9+
/>
10+
)
11+
12+
export default EmbedExampleYouTube

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react'
2+
import { Message } from 'semantic-ui-react'
3+
4+
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
5+
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
6+
7+
const EmbedTypesExamples = () => (
8+
<ExampleSection title='Types'>
9+
<ComponentExample
10+
title='YouTube'
11+
description='An embed can be used to display YouTube Content.'
12+
examplePath='modules/Embed/Types/EmbedExampleYoutube'
13+
/>
14+
<ComponentExample
15+
title='Vimeo'
16+
description='An embed can be used to display Vimeo content.'
17+
examplePath='modules/Embed/Types/EmbedExampleVimeo'
18+
/>
19+
<ComponentExample
20+
title='Custom Content'
21+
description='An embed can display any web content.'
22+
examplePath='modules/Embed/Types/EmbedExampleCustom'
23+
>
24+
<Message info>
25+
Embeds use an intrinsic aspect ratios to embed content responsively. Content will preserve their intrinsic
26+
aspect ratio for all browser sizes responsively
27+
</Message>
28+
</ComponentExample>
29+
</ExampleSection>
30+
)
31+
32+
export default EmbedTypesExamples

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import { Embed } from 'semantic-ui-react'
3+
4+
const EmbedExampleSettings = () => (
5+
<Embed
6+
placeholder='http://semantic-ui.com/images/image-16by9.png'
7+
source='youtube'
8+
sourceId='D0WnZyxp_Wo'
9+
sourceSettings={{
10+
autoPlay: false,
11+
brandedUI: false,
12+
color: 'white',
13+
hd: false,
14+
}}
15+
/>
16+
)
17+
18+
export default EmbedExampleSettings

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
3+
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
4+
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
5+
6+
const EmbedUsageExamples = () => (
7+
<ExampleSection title='Usage'>
8+
<ComponentExample
9+
title='Source settings'
10+
description='Settings to configure video behavior.'
11+
examplePath='modules/Embed/Usage/EmbedExampleSettings'
12+
/>
13+
</ExampleSection>
14+
)
15+
16+
export default EmbedUsageExamples

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
import { Embed } from 'semantic-ui-react'
3+
4+
const EmbedExampleAspectRatio = () => (
5+
<Embed
6+
aspectRatio='4:3'
7+
placeholder='http://semantic-ui.com/images/4by3.jpg'
8+
source='youtube'
9+
sourceId='HTZudKi36bo'
10+
/>
11+
)
12+
13+
export default EmbedExampleAspectRatio

0 commit comments

Comments
 (0)