feat(Popup): add component

docs/app/Examples/modules/Popup/Triggers/PopupClickExample.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+const PopupClickExample = () => (
+  <Popup
+    trigger={<Button color='red' icon='flask' content='Activate doomsday device' />}
+    content={<Button color='green' content='Confirm the launch' />}
+    on='click'
+    positioning='top right'
+  />
+)
+
+export default PopupClickExample

docs/app/Examples/modules/Popup/Triggers/PopupFocusExample.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Input, Popup } from 'semantic-ui-react'
+
+const PopupFocusExample = () => (
+  <Popup
+    trigger={<Input icon='search' placeholder='Search...' />}
+    header='Movie Search'
+    content='You may search by genre, header, year and actors'
+    on='focus'
+  />
+)
+
+export default PopupFocusExample

docs/app/Examples/modules/Popup/Triggers/PopupHoverExample.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+const PopupHoverExample = () => (
+  <Popup
+    trigger={<Button icon='add' content='Add a friend' />}
+    content='Sends an email invite to a friend.'
+    on='hover'
+  />
+)
+
+export default PopupHoverExample

docs/app/Examples/modules/Popup/Triggers/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const PopupTriggersExamples = () => (
+  <ExampleSection title='Triggers'>
+    <ComponentExample
+      title='Hover'
+      description='A popup can be triggered on hover'
+      examplePath='modules/Popup/Triggers/PopupHoverExample'
+    />
+    <ComponentExample
+      title='Click'
+      description='A popup can be triggered on click'
+      examplePath='modules/Popup/Triggers/PopupClickExample'
+    />
+    <ComponentExample
+      title='Focus'
+      description='A popup can be triggered on focus'
+      examplePath='modules/Popup/Triggers/PopupFocusExample'
+    />
+  </ExampleSection>
+)
+
+export default PopupTriggersExamples

docs/app/Examples/modules/Popup/Types/PopupExample.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+const PopupExample = () => (
+  <Popup
+    trigger={<Button icon='add' />}
+    content='Add users to your feed'
+  />
+)
+
+export default PopupExample

docs/app/Examples/modules/Popup/Types/PopupHtmlExample.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Popup, Card, Rating, Image } from 'semantic-ui-react'
+
+const IndividualCard = (
+  <Card>
+    <Image src='http://semantic-ui.com/images/movies/totoro-horizontal.jpg' />
+    <Card.Content>
+      <Card.Header>
+        My Neighbor Totoro
+      </Card.Header>
+      <Card.Description>
+        Two sisters move to the country with their father in order to be
+        closer to their hospitalized mother, and discover the surrounding
+        trees are inhabited by magical spirits.
+      </Card.Description>
+    </Card.Content>
+  </Card>
+)
+
+const PopupHtmlExample = () => (
+  <Popup trigger={IndividualCard}>
+    <Popup.Header>User Rating</Popup.Header>
+    <Popup.Content>
+      <Rating icon='star' defaultRating={3} maxRating={4} />
+    </Popup.Content>
+  </Popup>
+)
+
+export default PopupHtmlExample

docs/app/Examples/modules/Popup/Types/PopupTitledExample.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Image, Popup } from 'semantic-ui-react'
+
+const users = [
+  {
+    name: 'Elliot Fu',
+    bio: 'Elliot has been a member since July 2012',
+    avatar: 'http://semantic-ui.com/images/avatar/small/elliot.jpg',
+  },
+  {
+    name: 'Stevie Feliciano',
+    bio: 'Stevie has been a member since August 2013',
+    avatar: 'http://semantic-ui.com/images/avatar/small/stevie.jpg',
+  },
+  {
+    name: 'Matt',
+    bio: 'Matt has been a member since July 2014',
+    avatar: 'http://semantic-ui.com/images/avatar/small/matt.jpg',
+  },
+]
+
+export default function PopupTitledExample() {
+  const avatars = users.map((user, index) =>
+    <Popup
+      key={user.name}
+      trigger={<Image src={user.avatar} avatar />}
+      header={user.name}
+      content={user.bio}
+    />
+  )
+
+  return <div>{avatars}</div>
+}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const PopupTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Popup'
+      description='An element can specify popup content to appear'
+      examplePath='modules/Popup/Types/PopupExample'
+    />
+    <ComponentExample
+      title='Titled'
+      description='An element can specify popup content with a title'
+      examplePath='modules/Popup/Types/PopupTitledExample'
+    />
+    <ComponentExample
+      title='HTML'
+      description='An element can specify HTML for a popup'
+      examplePath='modules/Popup/Types/PopupHtmlExample'
+    />
+  </ExampleSection>
+)
+
+export default PopupTypesExamples

docs/app/Examples/modules/Popup/Variations/PopupBasicExample.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+const PopupBasicExample = () => (
+  <Popup
+    trigger={<Button icon='add' />}
+    content="The default theme's basic popup removes the pointing arrow."
+    basic
+  />
+)
+
+export default PopupBasicExample

docs/app/Examples/modules/Popup/Variations/PopupFlowingExample.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Header, Button, Popup, Grid } from 'semantic-ui-react'
+
+const PopupFlowingExample = () => (
+  <Popup
+    trigger={<Button>Show flowing popup</Button>}
+    flowing
+    hoverable
+  >
+    <Grid centered divided columns={3}>
+      <Grid.Column textAlign='center'>
+        <Header as='h4'>Basic Plan</Header>
+        <p><b>2</b> projects, $10 a month</p>
+        <Button>Choose</Button>
+      </Grid.Column>
+      <Grid.Column textAlign='center'>
+        <Header as='h4'>Business Plan</Header>
+        <p><b>5</b> projects, $20 a month</p>
+        <Button>Choose</Button>
+      </Grid.Column>
+      <Grid.Column textAlign='center'>
+        <Header as='h4'>Premium Plan</Header>
+        <p><b>8</b> projects, $25 a month</p>
+        <Button>Choose</Button>
+      </Grid.Column>
+    </Grid>
+  </Popup>
+)
+
+export default PopupFlowingExample

docs/app/Examples/modules/Popup/Variations/PopupHideOnScrollExample.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+const PopupHideOnScrollExample = () => (
+  <div>
+    <Popup
+      trigger={<Button icon>Click me</Button>}
+      content='Hide the popup on any scroll event'
+      on='click'
+      hideOnScroll
+    />
+    <Popup
+      trigger={<Button icon>Hover me</Button>}
+      content='Hide the popup on any scroll event'
+      hideOnScroll
+    />
+  </div>
+)
+
+export default PopupHideOnScrollExample

docs/app/Examples/modules/Popup/Variations/PopupInvertedExample.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Button, Icon, Popup } from 'semantic-ui-react'
+
+const PopupInvertedExample = () => (
+  <div>
+    <Popup
+      trigger={<Button icon='add' />}
+      content='Hello. This is an inverted popup'
+      inverted
+    />
+    <Popup
+      trigger={<Icon circular name='heart' />}
+      content='Hello. This is an inverted popup'
+      inverted
+    />
+  </div>
+)
+
+export default PopupInvertedExample

docs/app/Examples/modules/Popup/Variations/PopupOffsetExample.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Icon, Popup } from 'semantic-ui-react'
+
+const PopupOffsetExample = () => (
+  <div>
+    <Popup
+      trigger={<Icon size='large' name='heart' circular />}
+      content='Way off to the left'
+      offset={50}
+      positioning='left center'
+    />
+    <Popup
+      trigger={<Icon size='large' name='heart' circular />}
+      content='As expected this popup is way off to the right'
+      offset={50}
+      positioning='right center'
+    />
+  </div>
+)
+
+export default PopupOffsetExample

docs/app/Examples/modules/Popup/Variations/PopupPositionExample.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Icon, Popup, Grid } from 'semantic-ui-react'
+
+const PopupPositionExample = () => (
+  <Grid columns={3} style={{ width: '600px' }}>
+    <Grid.Row>
+      <Grid.Column>
+        <Popup
+          trigger={<Icon name='heart' color='red' size='large' circular />}
+          content='I am positioned to the top left'
+          positioning='top left'
+        />
+      </Grid.Column>
+      <Grid.Column textAlign='center'>
+        <Popup
+          trigger={<Icon name='heart' color='red' size='large' circular />}
+          content='I am positioned to the top center'
+          positioning='top center'
+        />
+      </Grid.Column>
+      <Grid.Column textAlign='right'>
+        <Popup
+          trigger={<Icon name='heart' color='red' size='large' circular />}
+          content='I am positioned to the top right'
+          positioning='top right'
+        />
+      </Grid.Column>
+    </Grid.Row>
+    <Grid.Row>
+      <Grid.Column floated='left'>
+        <Popup
+          trigger={<Icon name='heart' color='red' size='large' circular />}
+          content='I am positioned to the left center'
+          positioning='left center'
+        />
+      </Grid.Column>
+      <Grid.Column floated='right' textAlign='right'>
+        <Popup
+          trigger={<Icon name='heart' color='red' size='large' circular />}
+          content='I am positioned to the right center'
+          positioning='right center'
+        />
+      </Grid.Column>
+    </Grid.Row>
+    <Grid.Row>
+      <Grid.Column>
+        <Popup
+          trigger={<Icon name='heart' color='red' size='large' circular />}
+          content='I am positioned to the bottom left'
+          positioning='bottom left'
+        />
+      </Grid.Column>
+      <Grid.Column textAlign='center'>
+        <Popup
+          trigger={<Icon name='heart' color='red' size='large' circular />}
+          content='I am positioned to the bottom center'
+          positioning='bottom center'
+        />
+      </Grid.Column>
+      <Grid.Column textAlign='right'>
+        <Popup
+          trigger={<Icon name='heart' color='red' size='large' circular />}
+          content='I am positioned to the bottom right'
+          positioning='bottom right'
+        />
+      </Grid.Column>
+    </Grid.Row>
+  </Grid>
+)
+
+export default PopupPositionExample

docs/app/Examples/modules/Popup/Variations/PopupSizeExample.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Icon, Popup } from 'semantic-ui-react'
+
+const PopupSizeExample = () => (
+  <div>
+    <Popup
+      trigger={<Icon circular name='heart' />}
+      content='Hello. This is a mini popup'
+      size='mini'
+    />
+    <Popup
+      trigger={<Icon circular name='heart' />}
+      content='Hello. This is a tiny popup'
+      size='tiny'
+    />
+    <Popup
+      trigger={<Icon circular name='heart' />}
+      content='Hello. This is a small popup'
+      size='small'
+    />
+    <Popup
+      trigger={<Icon circular name='heart' />}
+      content='Hello. This is a large popup'
+      size='large'
+    />
+    <Popup
+      trigger={<Icon circular name='heart' />}
+      content='Hello. This is a huge popup'
+      size='huge'
+    />
+  </div>
+)
+
+export default PopupSizeExample