From 70e901319447219ffc7527d66f855d0af379bc7d Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Sat, 15 Jul 2017 13:53:30 +0300
Subject: [PATCH 1/5] docs(Example): add ShorthandExample and ability to
 version docs

---
 .../ComponentDoc/ComponentExample.js          | 81 +++++++++++--------
 .../app/Components/ComponentDoc/SUIVersion.js | 20 +++++
 .../ComponentDoc/ShorthandExample.js          | 16 ++++
 docs/app/index.ejs                            |  3 -
 4 files changed, 82 insertions(+), 38 deletions(-)
 create mode 100644 docs/app/Components/ComponentDoc/SUIVersion.js
 create mode 100644 docs/app/Components/ComponentDoc/ShorthandExample.js

diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js
index 261e84fa59..91792952e4 100644
--- a/docs/app/Components/ComponentDoc/ComponentExample.js
+++ b/docs/app/Components/ComponentDoc/ComponentExample.js
@@ -11,6 +11,7 @@ import { exampleContext, repoURL } from 'docs/app/utils'
 import { Divider, Grid, Icon, Header, Menu, Popup } from 'src'
 import Editor from 'docs/app/Components/Editor/Editor'
 import { scrollToAnchor } from 'docs/app/utils'
+import SUIVersion from './SUIVersion'
 
 const babelConfig = {
   presets: ['es2015', 'react', 'stage-1'],
@@ -66,6 +67,7 @@ class ComponentExample extends Component {
     history: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     match: PropTypes.object.isRequired,
+    suiVersion: PropTypes.string,
     title: PropTypes.node,
   }
 
@@ -388,7 +390,7 @@ class ComponentExample extends Component {
   }
 
   render() {
-    const { children, description, title } = this.props
+    const { children, description, suiVersion, title } = this.props
     const { copiedDirectLink, exampleElement, showCode, showHTML } = this.state
     const exampleStyle = {}
 
@@ -397,41 +399,50 @@ class ComponentExample extends Component {
     }
 
     return (
-      <Grid className='docs-example' style={exampleStyle} divided={showCode} columns='1' id={this.anchorName}>
-        <Grid.Column style={headerColumnStyle}>
-          {title && <Header as='h3' className='no-anchor' style={titleStyle} content={title} />}
-          {description && <p>{description}</p>}
-          <Menu compact text icon size='small' color='green' className='docs-example-menu'>
-            <ToolTip content={copiedDirectLink ? ' Copied Link!' : 'Direct link'}>
-              <Menu.Item href={`#${this.anchorName}`} onClick={this.handleDirectLinkClick}>
-                <Icon size='large' color='grey' name='linkify' fitted />
-              </Menu.Item>
-            </ToolTip>
-            <ToolTip content='Full Screen'>
-              <Menu.Item href={`/maximize/${this.anchorName}`} target='_blank'>
-                <Icon size='large' color='grey' name='window maximize' fitted />
-              </Menu.Item>
-            </ToolTip>
-            <ToolTip content='Show HTML'>
-              <Menu.Item active={showHTML} onClick={this.handleShowHTMLClick}>
-                <Icon size='large' color={showHTML ? 'green' : 'grey'} name='html5' fitted />
-              </Menu.Item>
-            </ToolTip>
-            <ToolTip content='Edit Code'>
-              <Menu.Item active={showCode} onClick={this.handleShowCodeClick}>
-                <Icon size='large' name='code' fitted />
-              </Menu.Item>
-            </ToolTip>
-          </Menu>
-        </Grid.Column>
-        {children && (
-          <Grid.Column style={childrenStyle}>
-            {children}
+      <Grid className='docs-example' divided={showCode} id={this.anchorName} style={exampleStyle}>
+        <Grid.Row>
+          <Grid.Column style={headerColumnStyle} width={12}>
+            {title && <Header as='h3' className='no-anchor' style={titleStyle} content={title} />}
+            {description && <p>{description}</p>}
           </Grid.Column>
-        )}
-        <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
-          {exampleElement}
-        </Grid.Column>
+          <Grid.Column textAlign='right' width={4}>
+            <Menu compact text icon size='small' color='green' className='docs-example-menu'>
+              <ToolTip content={copiedDirectLink ? ' Copied Link!' : 'Direct link'}>
+                <Menu.Item href={`#${this.anchorName}`} onClick={this.handleDirectLinkClick}>
+                  <Icon size='large' color='grey' name='linkify' fitted />
+                </Menu.Item>
+              </ToolTip>
+              <ToolTip content='Full Screen'>
+                <Menu.Item href={`/maximize/${this.anchorName}`} target='_blank'>
+                  <Icon size='large' color='grey' name='window maximize' fitted />
+                </Menu.Item>
+              </ToolTip>
+              <ToolTip content='Show HTML'>
+                <Menu.Item active={showHTML} onClick={this.handleShowHTMLClick}>
+                  <Icon size='large' color={showHTML ? 'green' : 'grey'} name='html5' fitted />
+                </Menu.Item>
+              </ToolTip>
+              <ToolTip content='Edit Code'>
+                <Menu.Item active={showCode} onClick={this.handleShowCodeClick}>
+                  <Icon size='large' name='code' fitted />
+                </Menu.Item>
+              </ToolTip>
+            </Menu>
+
+            {suiVersion && <SUIVersion version={suiVersion} />}
+          </Grid.Column>
+        </Grid.Row>
+
+        <Grid.Row columns={1}>
+          {children && <Grid.Column style={childrenStyle}>{children}</Grid.Column>}
+        </Grid.Row>
+
+        <Grid.Row columns={1}>
+          <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
+            {exampleElement}
+          </Grid.Column>
+        </Grid.Row>
+
         {this.renderJSX()}
         {this.renderHTML()}
       </Grid>
diff --git a/docs/app/Components/ComponentDoc/SUIVersion.js b/docs/app/Components/ComponentDoc/SUIVersion.js
new file mode 100644
index 0000000000..72178fdb2e
--- /dev/null
+++ b/docs/app/Components/ComponentDoc/SUIVersion.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { Label } from 'src'
+
+const SUIVersion = ({ version }) => (
+  <Label
+    as='a'
+    color='teal'
+    content={version}
+    size='tiny'
+    title={`Available from Semantic UI ${version}`}
+  />
+)
+
+SUIVersion.propTypes = {
+  version: PropTypes.string.isRequired,
+}
+
+export default SUIVersion
diff --git a/docs/app/Components/ComponentDoc/ShorthandExample.js b/docs/app/Components/ComponentDoc/ShorthandExample.js
new file mode 100644
index 0000000000..1b67f9921a
--- /dev/null
+++ b/docs/app/Components/ComponentDoc/ShorthandExample.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ComponentExample from './ComponentExample'
+
+const ShorthandExample = ({ description, ...rest }) => <ComponentExample {...rest} description={description} />
+
+ShorthandExample.propTypes = {
+  description: PropTypes.node,
+}
+
+ShorthandExample.defaultProps = {
+  description: 'You can do the same using shorthands.',
+}
+
+export default ShorthandExample
diff --git a/docs/app/index.ejs b/docs/app/index.ejs
index 6a4fe7b527..a6b51ddb44 100644
--- a/docs/app/index.ejs
+++ b/docs/app/index.ejs
@@ -163,9 +163,6 @@
 
     .docs-example-menu {
       transition: opacity 200ms;
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
       opacity: 0;
     }
 

From 8be30d861464dcafd0e259751e7ca459a3b5026b Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 17 Jul 2017 12:28:16 +0300
Subject: [PATCH 2/5] docs(Example): add versions to examples

---
 docs/app/Examples/elements/Step/Variations/index.js | 1 +
 docs/app/Examples/modules/Modal/Variations/index.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/app/Examples/elements/Step/Variations/index.js b/docs/app/Examples/elements/Step/Variations/index.js
index 6c0a281995..fc04b34268 100644
--- a/docs/app/Examples/elements/Step/Variations/index.js
+++ b/docs/app/Examples/elements/Step/Variations/index.js
@@ -15,6 +15,7 @@ const StepVariationsExamples = () => (
       title='Unstackable'
       description='A step can prevent itself from stacking on mobile.'
       examplePath='elements/Step/Variations/StepExampleUnstackable'
+      suiVersion='2.2.11'
     />
 
     <ComponentExample
diff --git a/docs/app/Examples/modules/Modal/Variations/index.js b/docs/app/Examples/modules/Modal/Variations/index.js
index d744ad04bf..301fffc952 100644
--- a/docs/app/Examples/modules/Modal/Variations/index.js
+++ b/docs/app/Examples/modules/Modal/Variations/index.js
@@ -14,6 +14,7 @@ const ModalExamples = () => (
       title='Scrolling Content'
       description='A modal can use the entire size of the screen.'
       examplePath='modules/Modal/Variations/ModalExampleScrollingContent'
+      suiVersion='2.2.11'
     />
     <ComponentExample
       title='Dimmer Variations'

From b68d92b0c1651e9aa9212219c0630f24fac25fa4 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 17 Jul 2017 12:37:23 +0300
Subject: [PATCH 3/5] docs(Example): use Shorthand example

---
 .../Examples/collections/Menu/Types/index.js  |  6 +--
 .../collections/Table/States/index.js         |  7 +--
 .../elements/Button/GroupVariations/index.js  |  4 +-
 .../Examples/elements/Label/Content/index.js  | 11 ++--
 .../app/Examples/elements/List/Types/index.js | 11 ++--
 .../Examples/elements/Loader/Types/index.js   |  6 +--
 .../Examples/modules/Checkbox/Types/index.js  |  6 ++-
 .../Examples/modules/Dropdown/Usage/index.js  |  4 +-
 .../app/Examples/modules/Modal/Types/index.js |  6 ++-
 .../modules/Search/Variations/index.js        |  3 +-
 docs/app/Examples/modules/Tab/Usage/index.js  |  4 +-
 docs/app/Examples/views/Feed/Content/index.js | 50 +++++++------------
 12 files changed, 50 insertions(+), 68 deletions(-)

diff --git a/docs/app/Examples/collections/Menu/Types/index.js b/docs/app/Examples/collections/Menu/Types/index.js
index 339518ffd4..1b1ba1797f 100644
--- a/docs/app/Examples/collections/Menu/Types/index.js
+++ b/docs/app/Examples/collections/Menu/Types/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 // TODO: Add example with <Popup> after it will be added
 
@@ -13,10 +14,7 @@ const Types = () => {
         description='A menu.'
         examplePath='collections/Menu/Types/MenuExampleBasic'
       />
-      <ComponentExample
-        description='Menu can be rendered via shorthand prop.'
-        examplePath='collections/Menu/Types/MenuExampleProps'
-      />
+      <ShorthandExample examplePath='collections/Menu/Types/MenuExampleProps' />
       <ComponentExample
         description='Menu item text can be defined with the content prop.'
         examplePath='collections/Menu/Types/MenuExampleContentProp'
diff --git a/docs/app/Examples/collections/Table/States/index.js b/docs/app/Examples/collections/Table/States/index.js
index d3c88013e6..56d5aad92b 100644
--- a/docs/app/Examples/collections/Table/States/index.js
+++ b/docs/app/Examples/collections/Table/States/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const States = () => {
   return (
@@ -21,11 +22,7 @@ const States = () => {
         description='A cell or row may warn a user.'
         examplePath='collections/Table/States/TableExampleWarning'
       />
-      <ComponentExample
-        title='Warning Shorthand'
-        description='Same as warning example but configured via shorthand.'
-        examplePath='collections/Table/States/TableExampleWarningShorthand'
-      />
+      <ShorthandExample examplePath='collections/Table/States/TableExampleWarningShorthand' />
       <ComponentExample
         title='Active'
         description='A cell or row can be active or selected by a user.'
diff --git a/docs/app/Examples/elements/Button/GroupVariations/index.js b/docs/app/Examples/elements/Button/GroupVariations/index.js
index e800b18a4a..9873e36d3a 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/index.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const ButtonGroupVariationsExamples = () => (
   <ExampleSection title='Group Variations'>
@@ -19,7 +21,7 @@ const ButtonGroupVariationsExamples = () => (
       description='Groups can be formatted as icons.'
       examplePath='elements/Button/GroupVariations/ButtonExampleGroupIcon'
     />
-    <ComponentExample
+    <ShorthandExample
       description='Using shorthand icons formats each individual button as an icon button.'
       examplePath='elements/Button/GroupVariations/ButtonExampleGroupIconShorthand'
     />
diff --git a/docs/app/Examples/elements/Label/Content/index.js b/docs/app/Examples/elements/Label/Content/index.js
index 2fb6153e51..3d5d78a31d 100644
--- a/docs/app/Examples/elements/Label/Content/index.js
+++ b/docs/app/Examples/elements/Label/Content/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const LabelContent = () => (
   <ExampleSection title='Content'>
@@ -16,20 +17,14 @@ const LabelContent = () => (
       description='A label can include an icon'
       examplePath='elements/Label/Content/LabelExampleIcon'
     />
-    <ComponentExample
-      description='You can also configure an label icon via props'
-      examplePath='elements/Label/Content/LabelExampleIconShorthand'
-    />
+    <ShorthandExample examplePath='elements/Label/Content/LabelExampleIconShorthand' />
 
     <ComponentExample
       title='Image'
       description='A label can include an image'
       examplePath='elements/Label/Content/LabelExampleImage'
     />
-    <ComponentExample
-      description='You can also configure an label image via props'
-      examplePath='elements/Label/Content/LabelExampleImageShorthand'
-    />
+    <ShorthandExample examplePath='elements/Label/Content/LabelExampleImageShorthand' />
 
     <ComponentExample
       title='Link'
diff --git a/docs/app/Examples/elements/List/Types/index.js b/docs/app/Examples/elements/List/Types/index.js
index 914b10eedd..9c8bab69af 100644
--- a/docs/app/Examples/elements/List/Types/index.js
+++ b/docs/app/Examples/elements/List/Types/index.js
@@ -3,6 +3,7 @@ import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const ListTypes = () => (
   <ExampleSection title='Types'>
@@ -11,19 +12,13 @@ const ListTypes = () => (
       description='A list groups related content'
       examplePath='elements/List/Types/ListExampleBasic'
     />
-    <ComponentExample
-      description='You can also pass an array of items as props'
-      examplePath='elements/List/Types/ListExampleBasicShorthand'
-    />
+    <ShorthandExample examplePath='elements/List/Types/ListExampleBasicShorthand' />
 
     <ComponentExample
       description='A list item can contain an icon'
       examplePath='elements/List/Types/ListExampleIcon'
     />
-    <ComponentExample
-      description='You can also define a list item icon via props'
-      examplePath='elements/List/Types/ListExampleIconShorthand'
-    />
+    <ShorthandExample examplePath='elements/List/Types/ListExampleIconShorthand' />
 
     <ComponentExample examplePath='elements/List/Types/ListExampleDivided' />
     <ComponentExample examplePath='elements/List/Types/ListExampleTree' />
diff --git a/docs/app/Examples/elements/Loader/Types/index.js b/docs/app/Examples/elements/Loader/Types/index.js
index ea360941ef..b656ee3e47 100644
--- a/docs/app/Examples/elements/Loader/Types/index.js
+++ b/docs/app/Examples/elements/Loader/Types/index.js
@@ -3,6 +3,7 @@ import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const LoaderTypesExamples = () => (
   <ExampleSection title='Types'>
@@ -21,10 +22,7 @@ const LoaderTypesExamples = () => (
       description='A loader can contain text.'
       examplePath='elements/Loader/Types/LoaderExampleText'
     />
-    <ComponentExample
-      description='A loader can contain text with shorthand prop.'
-      examplePath='elements/Loader/Types/LoaderExampleTextShorthand'
-    />
+    <ShorthandExample examplePath='elements/Loader/Types/LoaderExampleTextShorthand' />
   </ExampleSection>
 )
 
diff --git a/docs/app/Examples/modules/Checkbox/Types/index.js b/docs/app/Examples/modules/Checkbox/Types/index.js
index 025b10992b..f938850a3b 100644
--- a/docs/app/Examples/modules/Checkbox/Types/index.js
+++ b/docs/app/Examples/modules/Checkbox/Types/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 import { Message } from 'semantic-ui-react'
 
@@ -17,11 +19,11 @@ const CheckboxTypesExamples = () => (
       description='A box for checking.'
       examplePath='modules/Checkbox/Types/CheckboxExampleCheckbox'
     />
-    <ComponentExample
+    <ShorthandExample
       description='You can define a label with a props object.'
       examplePath='modules/Checkbox/Types/CheckboxExampleShorthandObject'
     />
-    <ComponentExample
+    <ShorthandExample
       description='You can define a label by passing your own element.'
       examplePath='modules/Checkbox/Types/CheckboxExampleShorthandElement'
     />
diff --git a/docs/app/Examples/modules/Dropdown/Usage/index.js b/docs/app/Examples/modules/Dropdown/Usage/index.js
index 25143eb24d..50ef11b701 100644
--- a/docs/app/Examples/modules/Dropdown/Usage/index.js
+++ b/docs/app/Examples/modules/Dropdown/Usage/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const DropdownUsageExamples = () => (
   <ExampleSection title='Usage'>
@@ -76,7 +78,7 @@ const DropdownUsageExamples = () => (
       description='A dropdown item can be rendered differently inside the menu.'
       examplePath='modules/Dropdown/Usage/DropdownExampleItemContent'
     />
-    <ComponentExample
+    <ShorthandExample
       title='Search Input'
       description='A dropdown implements a search input shorthand.'
       examplePath='modules/Dropdown/Usage/DropdownExampleSearchInput'
diff --git a/docs/app/Examples/modules/Modal/Types/index.js b/docs/app/Examples/modules/Modal/Types/index.js
index 0566dc7619..b8418f24fe 100644
--- a/docs/app/Examples/modules/Modal/Types/index.js
+++ b/docs/app/Examples/modules/Modal/Types/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 import { Message } from 'semantic-ui-react'
 
@@ -36,10 +38,10 @@ const ModalExamples = () => (
     />
     <ComponentExample
       title='Controlled'
-      description='A modal can be a controlled component'
+      description='A modal can be a controlled component.'
       examplePath='modules/Modal/Types/ModalExampleControlled'
     />
-    <ComponentExample
+    <ShorthandExample
       title='Shorthand'
       description='A modal can be created with shorthand props.'
       examplePath='modules/Modal/Types/ModalExampleShorthand'
diff --git a/docs/app/Examples/modules/Search/Variations/index.js b/docs/app/Examples/modules/Search/Variations/index.js
index 2528b24839..943bb12975 100644
--- a/docs/app/Examples/modules/Search/Variations/index.js
+++ b/docs/app/Examples/modules/Search/Variations/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const SearchVariationsExamples = () => (
   <ExampleSection title='Variations'>
@@ -15,7 +16,7 @@ const SearchVariationsExamples = () => (
       description='A search can have its results aligned to its left or right container edge.'
       examplePath='modules/Search/Variations/SearchExampleAligned'
     />
-    <ComponentExample
+    <ShorthandExample
       title='Input'
       description='A search can be passed an input via shorthand props.'
       examplePath='modules/Search/Variations/SearchExampleInput'
diff --git a/docs/app/Examples/modules/Tab/Usage/index.js b/docs/app/Examples/modules/Tab/Usage/index.js
index 63d78750bb..674ba8ea3d 100644
--- a/docs/app/Examples/modules/Tab/Usage/index.js
+++ b/docs/app/Examples/modules/Tab/Usage/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const TabUsageExamples = () => (
   <ExampleSection title='Usage'>
@@ -19,7 +21,7 @@ const TabUsageExamples = () => (
       description='You can capture the tab change event.'
       examplePath='modules/Tab/Usage/TabExampleOnTabChange'
     />
-    <ComponentExample
+    <ShorthandExample
       title='Custom Menu Items'
       description='You can pass any shorthand value as a menu item.'
       examplePath='modules/Tab/Usage/TabExampleCustomMenuItem'
diff --git a/docs/app/Examples/views/Feed/Content/index.js b/docs/app/Examples/views/Feed/Content/index.js
index 18564346f6..a743f79afb 100644
--- a/docs/app/Examples/views/Feed/Content/index.js
+++ b/docs/app/Examples/views/Feed/Content/index.js
@@ -1,64 +1,52 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const FeedContentExamples = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Image Label'
-      description='An event can contain an image label'
+      description='An event can contain an image label.'
       examplePath='views/Feed/Content/FeedExampleImageLabel'
     />
-    <ComponentExample
-      description='You can also configure an image label via props'
-      examplePath='views/Feed/Content/FeedExampleImageLabelShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleImageLabelShorthand' />
+
     <ComponentExample
       title='Icon Label'
-      description='An event can contain an icon label'
+      description='An event can contain an icon label.'
       examplePath='views/Feed/Content/FeedExampleIconLabel'
     />
-    <ComponentExample
-      description='You can also configure an icon label via props'
-      examplePath='views/Feed/Content/FeedExampleIconLabelShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleIconLabelShorthand' />
 
     <ComponentExample
       title='Content Date'
-      description='Event content can contain a date'
+      description='Event content can contain a date.'
       examplePath='views/Feed/Content/FeedExampleContentDate'
     />
-    <ComponentExample
-      description='You can also configure a content date via props'
-      examplePath='views/Feed/Content/FeedExampleContentDateShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleContentDateShorthand' />
+
     <ComponentExample
       title='Summary Date'
-      description='An event summary can contain a date'
+      description='An event summary can contain a date.'
       examplePath='views/Feed/Content/FeedExampleSummaryDate'
     />
-    <ComponentExample
-      description='You can also configure a summary date via props'
-      examplePath='views/Feed/Content/FeedExampleSummaryDateShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleSummaryDateShorthand' />
+
     <ComponentExample
       title='Extra Images'
-      description='An event can contain extra images'
+      description='An event can contain extra images.'
       examplePath='views/Feed/Content/FeedExampleExtraImages'
     />
-    <ComponentExample
-      description='You can also configure extra images via props'
-      examplePath='views/Feed/Content/FeedExampleExtraImagesShorthand'
-    />
-    <ComponentExample
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleExtraImagesShorthand' />
+
+    <ShorthandExample
       title='Extra Text'
-      description='An event can contain extra text'
+      description='An event can contain extra text.'
       examplePath='views/Feed/Content/FeedExampleExtraText'
     />
-    <ComponentExample
-      description='You can also configure extra text via props'
-      examplePath='views/Feed/Content/FeedExampleExtraTextShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleExtraTextShorthand' />
   </ExampleSection>
 )
 

From 181c563e8df871b6c4c6a1210fcd7e6a88812c8f Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 14 Aug 2017 10:58:20 +0300
Subject: [PATCH 4/5] fix(ComponentExample): remove cruft `divided`

---
 docs/app/Components/ComponentDoc/ComponentExample.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js
index 39c20c0d80..c86252f1c1 100644
--- a/docs/app/Components/ComponentDoc/ComponentExample.js
+++ b/docs/app/Components/ComponentDoc/ComponentExample.js
@@ -403,7 +403,7 @@ class ComponentExample extends Component {
     }
 
     return (
-      <Grid className='docs-example' divided={showCode} id={this.anchorName} style={exampleStyle}>
+      <Grid className='docs-example' id={this.anchorName} style={exampleStyle}>
         <Grid.Row>
           <Grid.Column style={headerColumnStyle} width={12}>
             {title && <Header as='h3' className='no-anchor' style={titleStyle} content={title} />}

From 8c9e099f7208d2f580b1851492730701872f8ea6 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 28 Aug 2017 17:48:10 +0300
Subject: [PATCH 5/5] mixed(ComponentExample): merge with master, update
 version position

---
 .../ComponentExample/ComponentExample.js      | 19 ++++-----
 .../ComponentExample/ComponentExampleTitle.js | 40 +++++++++++++++++++
 .../app/Components/ComponentDoc/SUIVersion.js | 20 ----------
 docs/app/HOC/index.js                         |  1 +
 docs/app/HOC/pure.js                          | 15 +++++++
 5 files changed, 63 insertions(+), 32 deletions(-)
 create mode 100644 docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js
 delete mode 100644 docs/app/Components/ComponentDoc/SUIVersion.js
 create mode 100644 docs/app/HOC/pure.js

diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
index 0bd4cbbe06..4a08eaf465 100644
--- a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
+++ b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -8,22 +8,15 @@ import { html } from 'js-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext, repoURL, scrollToAnchor } from 'docs/app/utils'
-import { Divider, Grid, Header, Menu } from 'src'
+import { Divider, Grid, Menu } from 'src'
 import Editor from 'docs/app/Components/Editor/Editor'
 import ComponentControls from '../ComponentControls'
-import SUIVersion from './SUIVersion'
+import ComponentExampleTitle from './ComponentExampleTitle'
 
 const babelConfig = {
   presets: ['es2015', 'react', 'stage-1'],
 }
 
-const titleStyle = {
-  margin: 0,
-}
-const descriptionStyle = {
-  maxWidth: '50rem',
-}
-
 const headerColumnStyle = {
   // provide room for absolutely positions toggle code icons
   minHeight: '4em',
@@ -394,8 +387,11 @@ class ComponentExample extends Component {
       >
         <Grid.Row columns={2}>
           <Grid.Column style={headerColumnStyle}>
-            {title && <Header as='h3' className='no-anchor' style={titleStyle} content={title} />}
-            {description && <p style={descriptionStyle}>{description}</p>}
+            <ComponentExampleTitle
+              description={description}
+              title={title}
+              suiVersion={suiVersion}
+            />
           </Grid.Column>
           <Grid.Column textAlign='right'>
             <ComponentControls
@@ -407,7 +403,6 @@ class ComponentExample extends Component {
               showHTML={showHTML}
               visible={controlsVisible}
             />
-            <SUIVersion version={suiVersion} />
           </Grid.Column>
         </Grid.Row>
 
diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js
new file mode 100644
index 0000000000..151c7a7ae6
--- /dev/null
+++ b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Header, Label } from 'semantic-ui-react'
+
+import { pure } from 'docs/app/HOC'
+
+const titleStyle = {
+  margin: 0,
+}
+const descriptionStyle = {
+  maxWidth: '50rem',
+}
+
+const ComponentExampleTitle = ({ description, title, suiVersion }) => (
+  <div>
+    {title && (
+      <Header as='h3' className='no-anchor' style={titleStyle}>
+        {title}
+        {suiVersion && (
+          <Label
+            as='a'
+            color='teal'
+            content={suiVersion}
+            size='tiny'
+            title={`Available from Semantic UI ${suiVersion}`}
+          />
+        )}
+      </Header>
+    )}
+    {description && <p style={descriptionStyle}>{description}</p>}
+  </div>
+)
+
+ComponentExampleTitle.propTypes = {
+  description: PropTypes.node,
+  title: PropTypes.node,
+  suiVersion: PropTypes.string,
+}
+
+export default pure(ComponentExampleTitle)
diff --git a/docs/app/Components/ComponentDoc/SUIVersion.js b/docs/app/Components/ComponentDoc/SUIVersion.js
deleted file mode 100644
index 72178fdb2e..0000000000
--- a/docs/app/Components/ComponentDoc/SUIVersion.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { Label } from 'src'
-
-const SUIVersion = ({ version }) => (
-  <Label
-    as='a'
-    color='teal'
-    content={version}
-    size='tiny'
-    title={`Available from Semantic UI ${version}`}
-  />
-)
-
-SUIVersion.propTypes = {
-  version: PropTypes.string.isRequired,
-}
-
-export default SUIVersion
diff --git a/docs/app/HOC/index.js b/docs/app/HOC/index.js
index f65e11d07d..072a6b5e7c 100644
--- a/docs/app/HOC/index.js
+++ b/docs/app/HOC/index.js
@@ -1,2 +1,3 @@
 export neverUpdate from './neverUpdate'
+export pure from './pure'
 export updateForKeys from './updateForKeys'
diff --git a/docs/app/HOC/pure.js b/docs/app/HOC/pure.js
new file mode 100644
index 0000000000..f0d68ab18f
--- /dev/null
+++ b/docs/app/HOC/pure.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+
+import { shallowEqual } from 'src/lib'
+
+const pure = ChildComponent => class extends Component {
+  shouldComponentUpdate(nextProps) {
+    return !shallowEqual(this.props, nextProps)
+  }
+
+  render() {
+    return <ChildComponent {...this.props} />
+  }
+}
+
+export default pure