docs(Card): refactor, add trailing . in description and fix typo

docs/app/Examples/views/Card/Content/ContentBlock.js → docs/app/Examples/views/Card/Content/CardExampleContentBlock.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card, Feed } from 'semantic-ui-react'
 
-const ContentBlock = () => (
+const CardExampleContentBlock = () => (
   <Card>
     <Card.Content>
       <Card.Header>
@@ -43,4 +43,4 @@ const ContentBlock = () => (
   </Card>
 )
 
-export default ContentBlock
+export default CardExampleContentBlock

docs/app/Examples/views/Card/Content/ExtraContent.js → docs/app/Examples/views/Card/Content/CardExampleExtraContent.js

@@ -6,7 +6,7 @@ const description = [
   'She enjoys the outdoors and currently resides in upstate New York.',
 ].join(' ')
 
-const ExtraContent = () => (
+const CardExampleExtraContent = () => (
   <Card>
     <Card.Content header='About Amy' />
     <Card.Content description={description} />
@@ -17,4 +17,4 @@ const ExtraContent = () => (
   </Card>
 )
 
-export default ExtraContent
+export default CardExampleExtraContent

docs/app/Examples/views/Card/Content/HeaderCard.js → docs/app/Examples/views/Card/Content/CardExampleHeaderCard.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card } from 'semantic-ui-react'
 
-const HeaderCards = () => (
+const CardExampleHeaderCard = () => (
   <Card.Group>
     <Card>
       <Card.Content>
@@ -35,4 +35,4 @@ const HeaderCards = () => (
   </Card.Group>
 )
 
-export default HeaderCards
+export default CardExampleHeaderCard

docs/app/Examples/views/Card/Content/ImageCard.js → docs/app/Examples/views/Card/Content/CardExampleImageCard.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card, Icon, Image } from 'semantic-ui-react'
 
-const ImageCard = () => (
+const CardExampleImageCard = () => (
   <Card>
     <Image src='http://semantic-ui.com/images/avatar/large/daniel.jpg' />
     <Card.Content>
@@ -18,4 +18,4 @@ const ImageCard = () => (
   </Card>
 )
 
-export default ImageCard
+export default CardExampleImageCard

docs/app/Examples/views/Card/Content/LinkCard.js → docs/app/Examples/views/Card/Content/CardExampleLinkCard.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card } from 'semantic-ui-react'
 
-const LinkCard = () => (
+const CardExampleLinkCard = () => (
   <Card
     href='#link'
     header='Elliot Baker'
@@ -10,4 +10,4 @@ const LinkCard = () => (
   />
 )
 
-export default LinkCard
+export default CardExampleLinkCard

docs/app/Examples/views/Card/Content/index.js

@@ -7,28 +7,28 @@ const Content = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Content Block'
-      description='A card contains blocks of content'
-      examplePath='views/Card/Content/ContentBlock'
+      description='A card contains blocks of content.'
+      examplePath='views/Card/Content/CardExampleContentBlock'
     />
     <ComponentExample
       title='Extra Content'
-      description='A card can contain extra content meant to be formatted separately from the main content'
-      examplePath='views/Card/Content/ExtraContent'
+      description='A card can contain extra content meant to be formatted separately from the main content.'
+      examplePath='views/Card/Content/CardExampleExtraContent'
     />
     <ComponentExample
       title='Image'
-      description='A card can contain an image'
-      examplePath='views/Card/Content/ImageCard'
+      description='A card can contain an image.'
+      examplePath='views/Card/Content/CardExampleImageCard'
     />
     <ComponentExample
       title='Header'
-      description='A card can contain a header'
-      examplePath='views/Card/Content/HeaderCard'
+      description='A card can contain a header.'
+      examplePath='views/Card/Content/CardExampleHeaderCard'
     />
     <ComponentExample
       title='Link'
-      description='A card can be formatted to link to other contnet'
-      examplePath='views/Card/Content/LinkCard'
+      description='A card can be formatted to link to other content.'
+      examplePath='views/Card/Content/CardExampleLinkCard'
     />
   </ExampleSection>
 )

docs/app/Examples/views/Card/Types/GroupByProps.js → docs/app/Examples/views/Card/Types/CardExampleGroupProps.js

@@ -19,8 +19,8 @@ const items = [
   },
 ]
 
-const GroupByProps = () => (
+const CardExampleGroupProps = () => (
   <Card.Group items={items} />
 )
 
-export default GroupByProps
+export default CardExampleGroupProps

docs/app/Examples/views/Card/Types/Groups.js → docs/app/Examples/views/Card/Types/CardExampleGroups.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Card, Image } from 'semantic-ui-react'
 
-const Groups = () => (
+const CardExampleGroups = () => (
   <Card.Group>
     <Card>
       <Card.Content>
@@ -66,4 +66,4 @@ const Groups = () => (
   </Card.Group>
 )
 
-export default Groups
+export default CardExampleGroups

docs/app/Examples/views/Card/Types/IndividualCard.js → docs/app/Examples/views/Card/Types/CardExampleIndividualCard.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card, Icon, Image } from 'semantic-ui-react'
 
-const IndividualCard = () => (
+const CardExampleIndividualCard = () => (
   <Card>
     <Image src='http://semantic-ui.com/images/avatar2/large/matthew.png' />
     <Card.Content>
@@ -26,4 +26,4 @@ const IndividualCard = () => (
   </Card>
 )
 
-export default IndividualCard
+export default CardExampleIndividualCard

docs/app/Examples/views/Card/Types/IndividualCardByProps.js → docs/app/Examples/views/Card/Types/CardExampleIndividualCardProps.js

@@ -8,7 +8,7 @@ const extra = (
   </a>
 )
 
-const IndividualCardByProps = () => (
+const CardExampleIndividualCardProps = () => (
   <Card
     image='http://semantic-ui.com/images/avatar/large/elliot.jpg'
     header='Elliot Baker'
@@ -18,4 +18,4 @@ const IndividualCardByProps = () => (
   />
 )
 
-export default IndividualCardByProps
+export default CardExampleIndividualCardProps

docs/app/Examples/views/Card/Types/index.js

@@ -7,21 +7,21 @@ const Types = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Card'
-      description='A card displays site content in a manner similar to a playing card'
-      examplePath='views/Card/Types/IndividualCard'
+      description='A card displays site content in a manner similar to a playing card.'
+      examplePath='views/Card/Types/CardExampleIndividualCard'
     />
     <ComponentExample
-      description='You can also use props to configure the markup'
-      examplePath='views/Card/Types/IndividualCardByProps'
+      description='You can also use props to configure the markup.'
+      examplePath='views/Card/Types/CardExampleIndividualCardProps'
     />
     <ComponentExample
       title='Cards'
-      description='A group of cards'
-      examplePath='views/Card/Types/Groups'
+      description='A group of cards.'
+      examplePath='views/Card/Types/CardExampleGroups'
     />
     <ComponentExample
-      description='You can also use props to configure the markup'
-      examplePath='views/Card/Types/GroupByProps'
+      description='You can also use props to configure the markup.'
+      examplePath='views/Card/Types/CardExampleGroupProps'
     />
   </ExampleSection>
 )

docs/app/Examples/views/Card/Variations/Colored.js → docs/app/Examples/views/Card/Variations/CardExampleColored.js

@@ -3,7 +3,7 @@ import { Card } from 'semantic-ui-react'
 
 const src = 'http://semantic-ui.com/images/wireframe/white-image.png'
 
-const ColoredCards = () => (
+const CardExampleColored = () => (
   <Card.Group itemsPerRow={4}>
     <Card color='red' image={src} />
     <Card color='orange' image={src} />
@@ -20,4 +20,4 @@ const ColoredCards = () => (
   </Card.Group>
 )
 
-export default ColoredCards
+export default CardExampleColored

docs/app/Examples/views/Card/Variations/ColumnCount.js → docs/app/Examples/views/Card/Variations/CardExampleColumnCount.js

@@ -3,7 +3,7 @@ import { Card } from 'semantic-ui-react'
 
 const src = 'http://semantic-ui.com/images/wireframe/image.png'
 
-const ColumnCountCards = () => (
+const CardExampleColumnCount = () => (
   <Card.Group itemsPerRow={6}>
     <Card raised image={src} />
     <Card raised image={src} />
@@ -20,4 +20,4 @@ const ColumnCountCards = () => (
   </Card.Group>
 )
 
-export default ColumnCountCards
+export default CardExampleColumnCount

docs/app/Examples/views/Card/Variations/Fluid.js → docs/app/Examples/views/Card/Variations/CardExampleFluid.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Card } from 'semantic-ui-react'
 
-const FluidCards = () => (
+const CardExampleFluid = () => (
   <Card.Group>
     <Card fluid color='red' header='Option 1' />
     <Card fluid color='orange' header='Option 2' />
     <Card fluid color='yellow' header='Option 3' />
   </Card.Group>
 )
 
-export default FluidCards
+export default CardExampleFluid

docs/app/Examples/views/Card/Variations/index.js

@@ -7,18 +7,18 @@ const Variations = () => (
   <ExampleSection title='Variations'>
     <ComponentExample
       title='Fluid Card'
-      description='A fluid card takes up the width of its container'
-      examplePath='views/Card/Variations/Fluid'
+      description='A fluid card takes up the width of its container.'
+      examplePath='views/Card/Variations/CardExampleFluid'
     />
     <ComponentExample
       title='Colored'
-      description='A card can specify a color'
-      examplePath='views/Card/Variations/Colored'
+      description='A card can specify a color.'
+      examplePath='views/Card/Variations/CardExampleColored'
     />
     <ComponentExample
       title='Column Count'
-      description='A group of cards can set how many cards should exist in a row'
-      examplePath='views/Card/Variations/ColumnCount'
+      description='A group of cards can set how many cards should exist in a row.'
+      examplePath='views/Card/Variations/CardExampleColumnCount'
     />
   </ExampleSection>
 )