style(Message): update docs to the latest standards (#789)

docs/app/Examples/collections/Message/States/MessageHiddenExample.js → docs/app/Examples/collections/Message/States/MessageExampleHidden.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageHiddenExample = () => (
+const MessageExampleHidden = () => (
   <Message hidden>
-    You can always see me
+    You can't see me
   </Message>
 )
 
-export default MessageHiddenExample
+export default MessageExampleHidden

docs/app/Examples/collections/Message/States/MessageVisibleExample.js → docs/app/Examples/collections/Message/States/MessageExampleVisible.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageVisibleExample = () => (
+const MessageExampleVisible = () => (
   <Message visible>
     You can always see me
   </Message>
 )
 
-export default MessageVisibleExample
+export default MessageExampleVisible

docs/app/Examples/collections/Message/States/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+const MessageStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Hidden'
+      description='A message can be hidden.'
+      examplePath='collections/Message/States/MessageExampleHidden'
+    />
+    <ComponentExample
+      title='Visible'
+      description='A message can be set to visible to force itself to be shown.'
+      examplePath='collections/Message/States/MessageExampleVisible'
+    />
+  </ExampleSection>
+)
+
+export default MessageStatesExamples

docs/app/Examples/collections/Message/Types/MessageDismissableBlockExample.js → docs/app/Examples/collections/Message/Types/MessageExampleDismissibleBlock.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Message } from 'semantic-ui-react'
 
-export default class MessageDismissableBlockExample extends Component {
+class MessageExampleDismissibleBlock extends Component {
   state = { visible: true }
 
   handleDismiss = () => {
@@ -33,3 +33,5 @@ export default class MessageDismissableBlockExample extends Component {
     )
   }
 }
+
+export default MessageExampleDismissibleBlock

docs/app/Examples/collections/Message/Types/MessageIconExample.js → docs/app/Examples/collections/Message/Types/MessageExampleIcon.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message, Icon } from 'semantic-ui-react'
 
-const MessageIconExample = () => (
+const MessageExampleIcon = () => (
   <Message icon>
     <Icon name='circle notched' loading />
     <Message.Content>
@@ -11,4 +11,4 @@ const MessageIconExample = () => (
   </Message>
 )
 
-export default MessageIconExample
+export default MessageExampleIcon

docs/app/Examples/collections/Message/Types/MessageIconPropExample.js → docs/app/Examples/collections/Message/Types/MessageExampleIconProp.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageIconPropExample = () => (
+const MessageExampleIconProp = () => (
   <Message
     icon='inbox'
     header='Have you heard about our mailing list?'
     content='Get the best news in your e-mail every day.'
   />
 )
 
-export default MessageIconPropExample
+export default MessageExampleIconProp

docs/app/Examples/collections/Message/Types/MessageListExample.js → docs/app/Examples/collections/Message/Types/MessageExampleList.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageListExample = () => (
+const MessageExampleList = () => (
   <Message>
     <Message.Header>New Site Features</Message.Header>
     <Message.List>
@@ -11,4 +11,4 @@ const MessageListExample = () => (
   </Message>
 )
 
-export default MessageListExample
+export default MessageExampleList

docs/app/Examples/collections/Message/Types/MessageListItemsPropExample.js → docs/app/Examples/collections/Message/Types/MessageExampleListItemsProp.js

@@ -6,11 +6,11 @@ const items = [
   'Drafts will now auto-save while writing',
 ]
 
-const MessageListItemsPropExample = () => (
+const MessageExampleListItemsProp = () => (
   <Message>
     <Message.Header>New Site Features</Message.Header>
     <Message.List items={items} />
   </Message>
 )
 
-export default MessageListItemsPropExample
+export default MessageExampleListItemsProp

docs/app/Examples/collections/Message/Types/MessageListPropExample.js → docs/app/Examples/collections/Message/Types/MessageExampleListProp.js

@@ -6,11 +6,11 @@ const list = [
   'Drafts will now auto-save while writing',
 ]
 
-const MessageListPropExample = () => (
+const MessageExampleListProp = () => (
   <Message
     header='New Site Features'
     list={list}
   />
 )
 
-export default MessageListPropExample
+export default MessageExampleListProp

docs/app/Examples/collections/Message/Types/MessageMessageExample.js → docs/app/Examples/collections/Message/Types/MessageExampleMessage.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageMessageExample = () => (
+const MessageExampleMessage = () => (
   <Message>
     <Message.Header>
       Changes in Service
@@ -12,4 +12,4 @@ const MessageMessageExample = () => (
   </Message>
 )
 
-export default MessageMessageExample
+export default MessageExampleMessage

docs/app/Examples/collections/Message/Types/MessageMessagePropsExample.js → docs/app/Examples/collections/Message/Types/MessageExampleMessageProps.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageMessagePropsExample = () => (
+const MessageExampleMessageProps = () => (
   <Message
     header='Changes in Service'
     content='We updated our privacy policy here to better service our customers. We recommend reviewing the changes.'
   />
 )
 
-export default MessageMessagePropsExample
+export default MessageExampleMessageProps

docs/app/Examples/collections/Message/Types/index.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+const MessageTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Message'
+      description='A basic message.'
+      examplePath='collections/Message/Types/MessageExampleMessage'
+    />
+    <ComponentExample
+      description='A basic message built with props.'
+      examplePath='collections/Message/Types/MessageExampleMessageProps'
+    />
+    <ComponentExample
+      title='List Message'
+      description='A message with a list.'
+      examplePath='collections/Message/Types/MessageExampleList'
+    />
+    <ComponentExample
+      description='Pass array of items to the Message list prop.'
+      examplePath='collections/Message/Types/MessageExampleListProp'
+    />
+    <ComponentExample
+      description='Pass an array of items to the MessageList items prop.'
+      examplePath='collections/Message/Types/MessageExampleListItemsProp'
+    />
+    <ComponentExample
+      title='Icon Message'
+      description='A message can contain an icon.'
+      examplePath='collections/Message/Types/MessageExampleIcon'
+    />
+    <ComponentExample
+      description='You can pass an Icon name to the Message icon prop.'
+      examplePath='collections/Message/Types/MessageExampleIconProp'
+    />
+    <ComponentExample
+      title='Dismissible Block'
+      description='A message that the user can choose to hide.'
+      examplePath='collections/Message/Types/MessageExampleDismissibleBlock'
+    >
+      <strong>
+        <Icon name='warning circle' />
+        Dismissible blocks do not automatically close.
+        Use the <code>onDismiss</code> callback to remove the message.
+      </strong>
+    </ComponentExample>
+  </ExampleSection>
+)
+
+export default MessageTypesExamples

docs/app/Examples/collections/Message/Variations/MessageAttachedExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleAttached.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Checkbox, Form, Icon, Message } from 'semantic-ui-react'
 
-const MessageAttachedExample = () => (
+const MessageExampleAttached = () => (
   <div>
     <Message
       attached
@@ -25,4 +25,4 @@ const MessageAttachedExample = () => (
   </div>
 )
 
-export default MessageAttachedExample
+export default MessageExampleAttached

docs/app/Examples/collections/Message/Variations/MessageColorExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleColor.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageColorExample = () => (
+const MessageExampleColor = () => (
   <div>
     <Message color='red'>Red</Message>
     <Message color='orange'>Orange</Message>
@@ -18,4 +18,4 @@ const MessageColorExample = () => (
   </div>
 )
 
-export default MessageColorExample
+export default MessageExampleColor

docs/app/Examples/collections/Message/Variations/MessageCompactExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleCompact.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageCompactExample = () => (
+const MessageExampleCompact = () => (
   <Message compact>
     Get all the best inventions in your e-mail every day. Sign up now!
   </Message>
 )
 
-export default MessageCompactExample
+export default MessageExampleCompact

docs/app/Examples/collections/Message/Variations/MessageCompactPropsExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleCompactProps.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageCompactPropsExample = () => (
+const MessageExampleCompactProps = () => (
   <Message
     compact
     content='Get all the best inventions in your e-mail every day. Sign up now!'
   />
 )
 
-export default MessageCompactPropsExample
+export default MessageExampleCompactProps

docs/app/Examples/collections/Message/Variations/MessageErrorExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleError.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageErrorExample = () => (
+const MessageExampleError = () => (
   <Message
     error
     header='There was some errors with your submission'
@@ -12,4 +12,4 @@ const MessageErrorExample = () => (
   />
 )
 
-export default MessageErrorExample
+export default MessageExampleError

docs/app/Examples/collections/Message/Variations/MessageFloatingExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleFloating.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageFloatingExample = () => (
+const MessageExampleFloating = () => (
   <Message floating>
     Way to go!
   </Message>
 )
 
-export default MessageFloatingExample
+export default MessageExampleFloating

docs/app/Examples/collections/Message/Variations/MessageFloatingPropsExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleFloatingProps.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageFloatingPropsExample = () => (
+const MessageExampleFloatingProps = () => (
   <Message
     floating
     content='Way to go!'
   />
 )
 
-export default MessageFloatingPropsExample
+export default MessageExampleFloatingProps

docs/app/Examples/collections/Message/Variations/MessageInfoExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleInfo.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageInfoExample = () => (
+const MessageExampleInfo = () => (
   <Message info>
     <Message.Header>Was this what you wanted?</Message.Header>
     <p>Did you know it's been a while?</p>
   </Message>
 )
 
-export default MessageInfoExample
+export default MessageExampleInfo

docs/app/Examples/collections/Message/Variations/MessageInfoPropsExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleInfoProps.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageInfoPropsExample = () => (
+const MessageExampleInfoProps = () => (
   <Message
     info
     header='Was this what you wanted?'
     content="Did you know it's been a while?"
   />
 )
 
-export default MessageInfoPropsExample
+export default MessageExampleInfoProps

docs/app/Examples/collections/Message/Variations/MessageNegativeExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleNegative.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageNegativeExample = () => (
+const MessageExampleNegative = () => (
   <Message negative>
     <Message.Header>We're sorry we can't apply that discount</Message.Header>
     <p>That offer has expired</p>
   </Message>
 )
 
-export default MessageNegativeExample
+export default MessageExampleNegative

docs/app/Examples/collections/Message/Variations/MessagePositiveExample.js → docs/app/Examples/collections/Message/Variations/MessageExamplePositive.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessagePositiveExample = () => (
+const MessageExamplePositive = () => (
   <Message positive>
     <Message.Header>You are eligible for a reward</Message.Header>
     <p>Go to your <b>special offers</b> page to see now.</p>
   </Message>
 )
 
-export default MessagePositiveExample
+export default MessageExamplePositive

docs/app/Examples/collections/Message/Variations/MessageSizeExample.js → docs/app/Examples/collections/Message/Variations/MessageExampleSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageColorExample = () => (
+const MessageExampleSize = () => (
   <div>
     <Message size='mini'>This is a mini message.</Message>
     <Message size='tiny'>This is a tiny message.</Message>
@@ -13,4 +13,4 @@ const MessageColorExample = () => (
   </div>
 )
 
-export default MessageColorExample
+export default MessageExampleSize