Container Component updated to v1 API

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

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

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

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+
+import React, { Component } from 'react'
+import { Container } from 'stardust'
+
+export default class ContainerContainerExample extends Component {
+  render() {
+    return (
+      <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>
+    )
+  }
+}

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

@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import { Message } from 'stardust'
+
+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 className='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>
+    )
+  }
+}

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

@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+
+import React, { Component } from 'react'
+import { Container, Divider } from 'stardust'
+
+export default class ContainerAlignmentExample extends Component {
+  render() {
+    return (
+      <div>
+        <Container left>
+          Left Aligned
+        </Container>
+        <Container center>
+          Center Aligned
+        </Container>
+        <Container right>
+          Right Aligned
+        </Container>
+        <Container 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>
+
+    )
+  }
+}

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

@@ -0,0 +1,22 @@
+/* eslint-disable max-len */
+
+import React, { Component } from 'react'
+import { Container, Message } from 'stardust'
+
+export default class ContainerFluidExample extends Component {
+  render() {
+    return (
+      <div>
+        <Message className='info'>
+          Fluid containers are useful for setting text alignment, or other variations on unstyled content
+        </Message>
+        <Container fluid>
+          <h2>Dogs Roles with Humans</h2>
+          <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>
+
+    )
+  }
+}

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

@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+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'
+        />
+      </ExampleSection>
+    )
+  }
+}

docs/app/Examples/elements/Divider/Variations/DividerVariationsExamples.js

@@ -5,7 +5,7 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 export default class DividerVariationsExamples extends Component {
   render() {
     return (
-      <ExampleSection title='Types'>
+      <ExampleSection title='Variations'>
         <ComponentExample
           title='Inverted'
           description='A divider can have its colors inverted'

src/elements/Container/Container.js

@@ -1,33 +1,68 @@
-import React, { Component, PropTypes } from 'react'
-import classNames from 'classnames'
-import META from '../../utils/Meta'
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
+import META from '../../utils/Meta';
+import { getUnhandledProps, useKeyOnly } from '../../utils/propUtils'
 
 /**
- * A container that gives your content some side padding.
+ * A container limits content to a maximum width
  */
-export default class Container extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-  }
-
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'Container',
-    type: META.type.element,
-  }
-
-  render() {
-    const classes = classNames(
-      'sd-container',
-      'ui',
-      this.props.className,
-      'container',
-    )
-    return (
-      <div {...this.props} className={classes}>
-        {this.props.children}
-      </div>
-    )
-  }
+function Container(props) {
+  const {
+    text, left, center, right, justified, fluid,
+    children, className,
+  } = props
+
+  const classes = cx('sd-container ui',
+    useKeyOnly(text, 'text'),
+    useKeyOnly(left, 'left aligned'),
+    useKeyOnly(center, 'center aligned'),
+    useKeyOnly(right, 'right aligned'),
+    useKeyOnly(justified, 'justified'),
+    useKeyOnly(fluid, 'fluid'),
+    'container',
+    className
+  )
+
+  const ContainerComponent = 'div'
+  const rest = getUnhandledProps(Container, props)
+
+  return (
+    <ContainerComponent className={classes} {...rest}>
+      {children}
+    </ContainerComponent>
+  )
+}
+
+Container._meta = {
+  library: META.library.semanticUI,
+  name: 'Container',
+  type: META.type.element,
 }
+
+Container.propTypes = {
+  /** Primary content of the Container */
+  children: PropTypes.node,
+
+  /** Classes to add to the container className. */
+  className: PropTypes.string,
+
+  /** Reduce maximum width to more naturally accomodate text */
+  text: PropTypes.bool,
+
+  /** Align container content to left */
+  left: PropTypes.bool,
+
+  /** Align container content to center */
+  center: PropTypes.bool,
+
+  /** Align container content to right */
+  right: PropTypes.bool,
+
+  /** Justify content to available space */
+  justified: PropTypes.bool,
+
+  /** Container has no maximum with */
+  fluid: PropTypes.bool,
+}
+
+export default Container

test/specs/elements/Container/Container-test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Container from 'src/elements/Container/Container'
+import * as common from 'test/specs/commonTests'
+
+describe('Container', () => {
+  common.isConformant(Container)
+  common.rendersChildren(Container)
+  common.hasUIClassName(Container)
+
+  common.propKeyOnlyToClassName(Container, 'text')
+  common.propKeyOnlyToClassName(Container, 'left', { className: 'aligned' })
+  common.propKeyOnlyToClassName(Container, 'center', { className: 'aligned' })
+  common.propKeyOnlyToClassName(Container, 'right', { className: 'aligned' })
+  common.propKeyOnlyToClassName(Container, 'justified')
+  common.propKeyOnlyToClassName(Container, 'fluid')
+
+  it('renders a <div /> element', () => {
+    shallow(<Container />)
+      .should.have.tagName('div')
+  })
+
+  it('adds the Container class', () => {
+    shallow(<Container />)
+      .should.have.className('container')
+  })
+})