docs(Example): add ShorthandExample and ability to version docs

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>

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

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

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'

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.'

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'
     />

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'

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' />

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>
 )
 

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

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'
     />

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'

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'

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'

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'