docs(Container): refactor, functional components, trailing period, misspelling

docs/app/Examples/elements/Container/Types/ContainerExampleContainer.js

@@ -0,0 +1,12 @@
+/* eslint-disable max-len */
+
+import React from 'react'
+import { Container } from 'semantic-ui-react'
+
+const ContainerExampleContainer = () => (
+  <Container>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+  </Container>
+)
+
+export default ContainerExampleContainer

docs/app/Examples/elements/Container/Types/index.js

@@ -1,29 +1,27 @@
 /* eslint-disable max-len */
 
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import { Message } from 'semantic-ui-react'
 
-export default class ContainerTypesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Types'>
-        <ComponentExample
-          title='Container'
-          description='A standard container'
-          examplePath='elements/Container/Types/ContainerContainerExample'
-        />
-        <ComponentExample
-          title='Text Container'
-          description='A container can reduce its maximum width to more naturally accomodate a single column of text'
-          examplePath='elements/Container/Types/ContainerTextExample'
-        >
-          <Message info>
-            <p>A text container is a simpler markup alternative to using a grid with a single column, and is designed to have a reasonable maximum width for displaying flowing text</p>
-          </Message>
-        </ComponentExample>
-      </ExampleSection>
-    )
-  }
-}
+const ContainerTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Container'
+      description='A standard container.'
+      examplePath='elements/Container/Types/ContainerExampleContainer'
+    />
+    <ComponentExample
+      title='Text Container'
+      description='A container can reduce its maximum width to more naturally accommodate a single column of text.'
+      examplePath='elements/Container/Types/ContainerExampleText'
+    >
+      <Message info>
+        <p>A text container is a simpler markup alternative to using a grid with a single column, and is designed to have a reasonable maximum width for displaying flowing text</p>
+      </Message>
+    </ComponentExample>
+  </ExampleSection>
+)
+
+export default ContainerTypesExamples

docs/app/Examples/elements/Container/Variations/ContainerExampleAlignment.js

@@ -0,0 +1,26 @@
+/* eslint-disable max-len */
+
+import React from 'react'
+import { Container, Divider } from 'semantic-ui-react'
+
+const ContainerExampleAlignment = () => (
+  <div>
+    <Container textAlign='left'>
+      Left Aligned
+    </Container>
+    <Container textAlign='center'>
+      Center Aligned
+    </Container>
+    <Container textAlign='right'>
+      Right Aligned
+    </Container>
+    <Container textAlign='justified'>
+      <b>Justified</b>
+      <Divider />
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+    </Container>
+  </div>
+)
+
+export default ContainerExampleAlignment

docs/app/Examples/elements/Container/Variations/ContainerExampleFluid.js

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+import React from 'react'
+import { Container, Header } from 'semantic-ui-react'
+
+const ContainerExampleFluid = () => (
+  <div>
+    <Container fluid>
+      <Header as='h2'>Dogs Roles with Humans</Header>
+      <p>Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.</p>
+      <p>The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.</p>
+    </Container>
+  </div>
+)
+
+export default ContainerExampleFluid

docs/app/Examples/elements/Container/Variations/index.js

@@ -1,29 +1,25 @@
-/* eslint-disable max-len */
-
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import { Message } from 'semantic-ui-react'
 
-export default class ContainerVariationsExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Variations'>
-        <ComponentExample
-          title='Text Alignment'
-          description='A container can specify its text alignment'
-          examplePath='elements/Container/Variations/ContainerAlignmentExample'
-        />
-        <ComponentExample
-          title='Fluid'
-          description='A fluid container has no maximum width'
-          examplePath='elements/Container/Variations/ContainerFluidExample'
-        >
-          <Message info>
-            Fluid containers are useful for setting text alignment, or other variations on unstyled content
-          </Message>
-        </ComponentExample>
-      </ExampleSection>
-    )
-  }
-}
+const ContainerVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Text Alignment'
+      description='A container can specify its text alignment.'
+      examplePath='elements/Container/Variations/ContainerExampleAlignment'
+    />
+    <ComponentExample
+      title='Fluid'
+      description='A fluid container has no maximum width.'
+      examplePath='elements/Container/Variations/ContainerExampleFluid'
+    >
+      <Message info>
+        Fluid containers are useful for setting text alignment, or other variations on unstyled content.
+      </Message>
+    </ComponentExample>
+  </ExampleSection>
+)
+
+export default ContainerVariationsExamples

docs/app/Examples/elements/Container/index.js

@@ -1,14 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
-export default class ContainerExamples extends Component {
-  render() {
-    return (
-      <div>
-        <Types />
-        <Variations />
-      </div>
-    )
-  }
-}
+const ContainerExamples = () => (
+  <div>
+    <Types />
+    <Variations />
+  </div>
+)
+
+export default ContainerExamples