docs(Example): use Shorthand example

Semantic-Org · Jul 17, 2017 · b68d92b · b68d92b
1 parent 8be30d8
commit b68d92b
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
 )