docs(Ref): add a basic example (#2226)

docs/app/Examples/addons/Ref/Types/RefExampleRef.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import { Grid, Table, Ref, Segment } from 'semantic-ui-react'
+
+export default class RefExampleRef extends Component {
+  state = {}
+
+  handleRef = node => this.setState({ node })
+
+  render() {
+    const { node } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column>
+          <Ref innerRef={this.handleRef}>
+            <Segment>An example node</Segment>
+          </Ref>
+        </Grid.Column>
+        <Grid.Column>
+          {node && (
+            <Table>
+              <Table.Body>
+                <Table.Row>
+                  <Table.Cell>nodeName</Table.Cell>
+                  <Table.Cell>{node.nodeName}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>nodeType</Table.Cell>
+                  <Table.Cell>{node.nodeType}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>textContent</Table.Cell>
+                  <Table.Cell>{node.textContent}</Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+          )}
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/addons/Ref/Types/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const RefTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Ref'
+      description={(
+        <span>
+          A component exposes the <code>innerRef</code> prop that always returns the DOM node of both functional and
+          class component children.
+        </span>
+      )}
+      examplePath='addons/Ref/Types/RefExampleRef'
+    />
+  </ExampleSection>
+)
+
+export default RefTypesExamples

docs/app/Examples/addons/Ref/index.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Types from './Types'
+
+const RefExamples = () => (
+  <div>
+    <Types />
+  </div>
+)
+
+export default RefExamples

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

@@ -18,17 +18,13 @@ const users = [
     avatar: '/assets/images/avatar/small/matt.jpg',
   },
 ]
-/* TODO: Remove <div> wrapper after all our components will be classes */
+
 const PopupExampleTitled = () => (
   <div>
     {users.map(user => (
       <Popup
         key={user.name}
-        trigger={(
-          <div>
-            <Image src={user.avatar} avatar />
-          </div>
-        )}
+        trigger={<Image src={user.avatar} avatar />}
         header={user.name}
         content={user.bio}
       />