feat(Segment): add size prop (#569)

* feat(Segment): add `size` prop

* feat(Segment): Add docs

docs/app/Examples/elements/Segment/Variations/SegmentGroupSizesExample.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Segment } from 'stardust'
+
+const SegmentGroupSizesExample = () => {
+  const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
+
+  return (
+    <div>
+      {sizes.map(size => (
+        <Segment.Group key={size} size={size}>
+          <Segment>
+            It's a {size} segment
+          </Segment>
+          <Segment>
+            And it's a {size} segment, too
+          </Segment>
+        </Segment.Group>
+      ))}
+    </div>
+  )
+}
+
+export default SegmentGroupSizesExample

docs/app/Examples/elements/Segment/Variations/SegmentSizesExample.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Segment } from 'stardust'
+
+const SegmentSizesExample = () => {
+  const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
+
+  return (
+    <div>
+      {sizes.map(size => (
+        <Segment key={size} size={size}>
+          It's a {size} segment
+        </Segment>
+      ))}
+    </div>
+  )
+}
+
+export default SegmentSizesExample

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

@@ -96,6 +96,15 @@ const SegmentVariationsExamples = () => (
       description='A basic segment has no special formatting.'
       examplePath='elements/Segment/Variations/SegmentBasicExample'
     />
+    <ComponentExample
+      title='Sizes'
+      description='A segment can have different sizes.'
+      examplePath='elements/Segment/Variations/SegmentSizesExample'
+    />
+    <ComponentExample
+      description='A group of segments can have different sizes.'
+      examplePath='elements/Segment/Variations/SegmentGroupSizesExample'
+    />
   </ExampleSection>
 )
 

src/elements/Segment/Segment.js

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
@@ -35,6 +36,7 @@ function Segment(props) {
     piled,
     raised,
     secondary,
+    size,
     stacked,
     tertiary,
     textAlign,
@@ -44,6 +46,7 @@ function Segment(props) {
   const classes = cx(
     'ui',
     color,
+    size,
     useKeyOrValueAndKey(attached, 'attached'),
     useKeyOnly(basic, 'basic'),
     useKeyOnly(circular, 'circular'),
@@ -78,10 +81,11 @@ Segment._meta = {
   type: META.TYPES.ELEMENT,
   props: {
     attached: ['top', 'bottom'],
+    color: SUI.COLORS,
     floated: SUI.FLOATS,
-    textAlign: SUI.TEXT_ALIGNMENTS,
     padded: ['very'],
-    color: SUI.COLORS,
+    size: _.without(SUI.SIZES, 'medium'),
+    textAlign: SUI.TEXT_ALIGNMENTS,
   },
 }
 
@@ -143,6 +147,9 @@ Segment.propTypes = {
   /** A segment can be formatted to appear less noticeable */
   secondary: PropTypes.bool,
 
+  /** A segment can have different sizes. */
+  size: PropTypes.oneOf(Segment._meta.props.size),
+
   /** Formatted to show it contains multiple pages. */
   stacked: PropTypes.bool,
 

src/elements/Segment/SegmentGroup.js

@@ -1,20 +1,24 @@
+import _ from 'lodash'
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
+
 import {
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
+  SUI,
   useKeyOnly,
 } from '../../lib'
 
 /**
  * A group of segments can be formatted to appear together.
  */
 function SegmentGroup(props) {
-  const { children, className, compact, horizontal, raised, stacked, piled } = props
+  const { children, className, compact, horizontal, piled, raised, size, stacked } = props
   const classes = cx(
     'ui',
+    size,
     useKeyOnly(horizontal, 'horizontal'),
     useKeyOnly(compact, 'compact'),
     useKeyOnly(piled, 'piled'),
@@ -34,6 +38,9 @@ SegmentGroup._meta = {
   name: 'SegmentGroup',
   parent: 'Segment',
   type: META.TYPES.ELEMENT,
+  props: {
+    size: _.without(SUI.SIZES, 'medium'),
+  },
 }
 
 SegmentGroup.propTypes = {
@@ -58,6 +65,9 @@ SegmentGroup.propTypes = {
   /** A segment group may be formatted to raise above the page. */
   raised: PropTypes.bool,
 
+  /** A segment group can have different sizes. */
+  size: PropTypes.oneOf(SegmentGroup._meta.props.size),
+
   /** Formatted to show it contains multiple pages. */
   stacked: PropTypes.bool,
 }

test/specs/elements/Segment/Segment-test.js

@@ -9,6 +9,7 @@ describe('Segment', () => {
   common.implementsTextAlignProp(Segment)
 
   common.propValueOnlyToClassName(Segment, 'color')
+  common.propValueOnlyToClassName(Segment, 'size')
 
   common.propKeyOnlyToClassName(Segment, 'basic')
   common.propKeyOnlyToClassName(Segment, 'circular')

test/specs/elements/Segment/SegmentGroup-test.js

@@ -6,6 +6,8 @@ describe('SegmentGroup', () => {
   common.hasUIClassName(SegmentGroup)
   common.rendersChildren(SegmentGroup)
 
+  common.propValueOnlyToClassName(SegmentGroup, 'size')
+
   common.propKeyOnlyToClassName(SegmentGroup, 'compact')
   common.propKeyOnlyToClassName(SegmentGroup, 'horizontal')
   common.propKeyOnlyToClassName(SegmentGroup, 'piled')