style(Search): update docs to the latest standards (#840)

Author: dpkwhan

…xamples/modules/Search/Types/Category.js …es/Search/Types/SearchExampleCategory.jsdocs/app/Examples/modules/Search/Types/Category.js renamed to docs/app/Examples/modules/Search/Types/SearchExampleCategory.js docs/app/Examples/modules/Search/Types/Category.js renamed to docs/app/Examples/modules/Search/Types/SearchExampleCategory.js

@@ -21,7 +21,7 @@ const source = _.range(0, 3).reduce((memo, index) => {
   return memo
 }, {})
 
-export default class SearchCategoryExample extends Component {
+export default class SearchExampleCategory extends Component {
   componentWillMount() {
     this.resetComponent()
   }

…s/modules/Search/Types/CategoryCustom.js …rch/Types/SearchExampleCategoryCustom.jsdocs/app/Examples/modules/Search/Types/CategoryCustom.js renamed to docs/app/Examples/modules/Search/Types/SearchExampleCategoryCustom.js docs/app/Examples/modules/Search/Types/CategoryCustom.js renamed to docs/app/Examples/modules/Search/Types/SearchExampleCategoryCustom.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { Label } from 'semantic-ui-react'
 
-import BaseCategoryExample from './Category'
+import SearchExampleCategory from './SearchExampleCategory'
 
 const categoryRenderer = ({ name }) =>
   <Label as={'span'} content={name} />
@@ -19,11 +19,11 @@ resultRenderer.propTypes = {
   description: PropTypes.string,
 }
 
-const SearchCategoryCustomExample = () => (
-  <BaseCategoryExample
+const SearchExampleCategoryCustom = () => (
+  <SearchExampleCategory
     categoryRenderer={categoryRenderer}
     resultRenderer={resultRenderer}
   />
 )
 
-export default SearchCategoryCustomExample
+export default SearchExampleCategoryCustom

…xamples/modules/Search/Types/Standard.js …es/Search/Types/SearchExampleStandard.jsdocs/app/Examples/modules/Search/Types/Standard.js renamed to docs/app/Examples/modules/Search/Types/SearchExampleStandard.js docs/app/Examples/modules/Search/Types/Standard.js renamed to docs/app/Examples/modules/Search/Types/SearchExampleStandard.js

@@ -10,7 +10,7 @@ const source = _.times(5, () => ({
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-export default class SearchStandardExample extends Component {
+export default class SearchExampleStandard extends Component {
   componentWillMount() {
     this.resetComponent()
   }

…s/modules/Search/Types/StandardCustom.js …rch/Types/SearchExampleStandardCustom.jsdocs/app/Examples/modules/Search/Types/StandardCustom.js renamed to docs/app/Examples/modules/Search/Types/SearchExampleStandardCustom.js docs/app/Examples/modules/Search/Types/StandardCustom.js renamed to docs/app/Examples/modules/Search/Types/SearchExampleStandardCustom.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { Label } from 'semantic-ui-react'
 
-import BaseStandardExample from './Standard'
+import SearchExampleStandard from './SearchExampleStandard'
 
 const resultRenderer = ({ title, description }) => (
   <Label content={title} />
@@ -12,10 +12,8 @@ resultRenderer.propTypes = {
   description: PropTypes.string,
 }
 
-const SearchStandardCustomExample = () => (
-  <BaseStandardExample
-    resultRenderer={resultRenderer}
-  />
+const SearchExampleStandardCustom = () => (
+  <SearchExampleStandard resultRenderer={resultRenderer} />
 )
 
-export default SearchStandardCustomExample
+export default SearchExampleStandardCustom

docs/app/Examples/modules/Search/Types/index.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const SearchTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Standard'
+      description='A search can display a set of results.'
+      examplePath='modules/Search/Types/SearchExampleStandard'
+    />
+    <ComponentExample
+      title='Standard (Custom Render)'
+      description='A search can have a custom rendering.'
+      examplePath='modules/Search/Types/SearchExampleStandardCustom'
+    />
+    <ComponentExample
+      title='Category'
+      description='A search can display results from remote content ordered by categories.'
+      examplePath='modules/Search/Types/SearchExampleCategory'
+    />
+    <ComponentExample
+      title='Category (Custom Render)'
+      description='A category search can have a custom rendering.'
+      examplePath='modules/Search/Types/SearchExampleCategoryCustom'
+    />
+  </ExampleSection>
+)
+
+export default SearchTypesExamples

docs/app/Examples/modules/Search/Variations/Aligned.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import SearchExampleStandard from '../Types/SearchExampleStandard'
+
+const SearchExampleAligned = () => <SearchExampleStandard aligned='right' />
+
+export default SearchExampleAligned

docs/app/Examples/modules/Search/Variations/Fluid.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import SearchExampleStandard from '../Types/SearchExampleStandard'
+
+const SearchExampleFluid = () => (
+  <SearchExampleStandard fluid />
+)
+
+export default SearchExampleFluid

docs/app/Examples/modules/Search/Variations/SearchExampleAligned.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const SearchVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Fluid'
+      description='A search can have its results take up the width of its container.'
+      examplePath='modules/Search/Variations/SearchExampleFluid'
+    />
+    <ComponentExample
+      title='Aligned'
+      description='A search can have its results aligned to its left or right container edge.'
+      examplePath='modules/Search/Variations/SearchExampleAligned'
+    />
+  </ExampleSection>
+)
+
+export default SearchVariationsExamples