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

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

* docs(Example): add versions to examples

* docs(Example): use Shorthand example

* fix(ComponentExample): remove cruft `divided`

* mixed(ComponentExample): merge with master, update version position

docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -8,21 +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 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',
@@ -53,6 +47,7 @@ class ComponentExample extends Component {
     history: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     match: PropTypes.object.isRequired,
+    suiVersion: PropTypes.string,
     title: PropTypes.node,
   }
 
@@ -377,7 +372,7 @@ class ComponentExample extends Component {
   }
 
   render() {
-    const { children, description, title } = this.props
+    const { children, description, suiVersion, title } = this.props
     const { controlsVisible, exampleElement, showCode, showHTML } = this.state
     const exampleStyle = {}
 
@@ -395,8 +390,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

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)

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
 
@@ -12,10 +13,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 = () => (
   <ExampleSection title='States'>
@@ -20,11 +21,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

@@ -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 CheckboxTypesExamples = () => (
   <ExampleSection title='Types'>
@@ -17,11 +18,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'

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'