feat(Statistic): enhance shorthand props and propTypes (#390)

* fix(README) Update entry about Step * fix(Docs) Update message usage * fix(Statistic) Update docs * fix(Statistic) Lint fix
Semantic-Org · Aug 14, 2016 · a15d37c · a15d37c
1 parent e1bbafd
commit a15d37c
Show file tree

Hide file tree

Showing 31 changed files with 256 additions and 259 deletions.
diff --git a/README.md b/README.md
@@ -144,7 +144,7 @@ Be sure to check out the above migrations before embarking on a new component.
 | x Rail          |                 |                 | _ Shape         |                    |
 | _ Reveal        |                 |                 | _ Sidebar       |                    |
 | x Segment       |                 |                 | _ Sticky        |                    |
-| _ Step          |                 |                 | _ Tab           |                    |
+| x Step          |                 |                 | _ Tab           |                    |
 |                 |                 |                 | _ Transition    |                    |
 
 ## Releasing

diff --git a/docs/app/Examples/elements/Loader/index.js b/docs/app/Examples/elements/Loader/index.js
@@ -4,7 +4,6 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import { Message } from 'stardust'
 
 // TODO: Update dimmers after implement <Dimmer>
-// TODO: Update messages after convert <Message> to v1 API
 
 const LoaderExamples = () => (
   <div>
@@ -14,7 +13,7 @@ const LoaderExamples = () => (
         description='A loader'
         examplePath='elements/Loader/Types/LoaderExample'
       >
-        <Message>
+        <Message info>
           Loaders are hidden unless has prop "active" or inside an "dimmer" with active prop.
         </Message>
       </ComponentExample>

diff --git a/docs/app/Examples/elements/Step/Groups/index.js b/docs/app/Examples/elements/Step/Groups/index.js
@@ -4,8 +4,6 @@ import { Icon, Message } from 'stardust'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-// TODO: Update <Message> usage after v1 API
-
 const Groups = () => (
   <ExampleSection title='Groups'>
     <ComponentExample

diff --git a/...tatistic/Content/StatisticLabelExample.js → ...xamples/views/Statistic/Content/Labels.js b/...tatistic/Content/StatisticLabelExample.js → ...xamples/views/Statistic/Content/Labels.js
@@ -3,15 +3,20 @@ import { Statistic } from 'stardust'
 
 const { Label, Value } = Statistic
 
-const StatisticLabelExample = () => (
+const Labels = () => (
   <div>
     <Statistic>
       <Value>2,204</Value>
       <Label>Views</Label>
     </Statistic>
 
+    <Statistic>
+      <Value value='2,204' />
+      <Label label='Views' />
+    </Statistic>
+
     <Statistic value='2,204' label='Views' />
   </div>
 )
 
-export default StatisticLabelExample
+export default Labels
diff --git a/docs/app/Examples/views/Statistic/Content/Props.js b/docs/app/Examples/views/Statistic/Content/Props.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Statistic } from 'stardust'
+
+const items = [
+  { label: 'Saves', value: '22' },
+  { label: 'Signups', text: true, value: 'Three Thousand' },
+  { label: 'Flights', value: '5' },
+  { label: 'Team Members', value: '42' },
+]
+
+const Props = () => (
+  <div>
+    <Statistic.Group>
+      <Statistic label='Saves' value='22' />
+      <Statistic label='Signups' value='Three Thousand' text />
+      <Statistic label='Flights' value='5' />
+      <Statistic label='Team Members' value='42' />
+    </Statistic.Group>
+
+    <Statistic.Group items={items} />
+  </div>
+)
+
+export default Props
diff --git a/docs/app/Examples/views/Statistic/Content/StatisticValuePropsExample.js b/docs/app/Examples/views/Statistic/Content/StatisticValuePropsExample.js
diff --git a/...tatistic/Content/StatisticValueExample.js → ...xamples/views/Statistic/Content/Values.js b/...tatistic/Content/StatisticValueExample.js → ...xamples/views/Statistic/Content/Values.js
@@ -3,7 +3,9 @@ import { Icon, Image, Statistic } from 'stardust'
 
 const { Group, Label, Value } = Statistic
 
-const StatisticValueExample = () => (
+// TODO: Update <Image> usage after <Image> will be updated to v1 API
+
+const Values = () => (
   <Group>
     <Statistic>
       <Value>22</Value>
@@ -28,12 +30,12 @@ const StatisticValueExample = () => (
 
     <Statistic>
       <Value>
-        <Image inline shape='circular' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
+        <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
         42
       </Value>
       <Label>Team Members</Label>
     </Statistic>
   </Group>
 )
 
-export default StatisticValueExample
+export default Values
diff --git a/docs/app/Examples/views/Statistic/Content/index.js b/docs/app/Examples/views/Statistic/Content/index.js
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Value'
+      description='A statistic can contain a numeric, icon, image, or text value'
+      examplePath='views/Statistic/Content/Values'
+    />
+    <ComponentExample examplePath='views/Statistic/Content/Props' />
+
+    <ComponentExample
+      title='Label'
+      description='A statistic can contain a label to help provide context for the presented value'
+      examplePath='views/Statistic/Content/Labels'
+    />
+  </ExampleSection>
+)
+
+export default Content
diff --git a/...stic/Types/StatisticBottomLabelExample.js → ...ples/views/Statistic/Types/BottomLabel.js b/...stic/Types/StatisticBottomLabelExample.js → ...ples/views/Statistic/Types/BottomLabel.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'stardust'
 
-const StatisticBottomLabelExample = () => (
+const BottomLabel = () => (
   <div>
     <Statistic>
       <Statistic.Value>5,550</Statistic.Value>
@@ -12,4 +12,4 @@ const StatisticBottomLabelExample = () => (
   </div>
 )
 
-export default StatisticBottomLabelExample
+export default BottomLabel
diff --git a/.../Statistic/Types/StatisticGroupExample.js → .../Examples/views/Statistic/Types/Groups.js b/.../Statistic/Types/StatisticGroupExample.js → .../Examples/views/Statistic/Types/Groups.js
@@ -2,13 +2,14 @@ import React from 'react'
 import { Statistic } from 'stardust'
 
 const { Group, Label, Value } = Statistic
+
 const items = [
-  { label: 'Faves', value: 22 },
+  { label: 'Faves', value: '22' },
   { label: 'Views', value: '31,200' },
-  { label: 'Members', value: 22 },
+  { label: 'Members', value: '22' },
 ]
 
-const StatisticGroupExample = () => (
+const Groups = () => (
   <div>
     <Group>
       <Statistic>
@@ -26,4 +27,4 @@ const StatisticGroupExample = () => (
   </div>
 )
 
-export default StatisticGroupExample
+export default Groups
diff --git a/...atistic/Types/StatisticTopLabelExample.js → ...xamples/views/Statistic/Types/TopLabel.js b/...atistic/Types/StatisticTopLabelExample.js → ...xamples/views/Statistic/Types/TopLabel.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'stardust'
 
-const StatisticTopLabelExample = () => (
+const TopLabel = () => (
   <div>
     <Statistic>
       <Statistic.Label>Views</Statistic.Label>
@@ -10,4 +10,4 @@ const StatisticTopLabelExample = () => (
   </div>
 )
 
-export default StatisticTopLabelExample
+export default TopLabel
diff --git a/docs/app/Examples/views/Statistic/Types/index.js b/docs/app/Examples/views/Statistic/Types/index.js
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Statistic'
+      description='A statistic can display a value with a label above or below it'
+      examplePath='views/Statistic/Types/BottomLabel'
+    />
+    <ComponentExample examplePath='views/Statistic/Types/TopLabel' />
+
+    <ComponentExample
+      title='Statistic Group'
+      description='A group of statistics'
+      examplePath='views/Statistic/Types/Groups'
+    />
+  </ExampleSection>
+)
+
+export default Types
diff --git a/...tic/Variations/StatisticColoredExample.js → ...les/views/Statistic/Variations/Colored.js b/...tic/Variations/StatisticColoredExample.js → ...les/views/Statistic/Variations/Colored.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'stardust'
 
-const StatisticColoredExample = () => (
+const Colored = () => (
   <Statistic.Group>
     <Statistic color='red' value='27' label='red' />
     <Statistic color='orange' value='8' label='orange' />
@@ -18,4 +18,4 @@ const StatisticColoredExample = () => (
   </Statistic.Group>
 )
 
-export default StatisticColoredExample
+export default Colored
diff --git a/docs/app/Examples/views/Statistic/Variations/EvenlyDivided.js b/docs/app/Examples/views/Statistic/Variations/EvenlyDivided.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import { Icon, Image, Statistic } from 'stardust'
+
+const { Group, Label, Value } = Statistic
+
+const EvenlyDivided = () => (
+  <Group widths='four'>
+    <Statistic>
+      <Value>22</Value>
+      <Label>Saves</Label>
+    </Statistic>
+
+    <Statistic>
+      <Value text>
+        Three
+        <br />Thousand
+      </Value>
+      <Label>Signups</Label>
+    </Statistic>
+
+    <Statistic>
+      <Value>
+        <Icon name='plane' />
+        5
+      </Value>
+      <Label>Flights</Label>
+    </Statistic>
+
+    <Statistic>
+      <Value>
+        <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
+        42
+      </Value>
+      <Label>Team Members</Label>
+    </Statistic>
+  </Group>
+)
+
+export default EvenlyDivided
diff --git a/...tic/Variations/StatisticFloatedExample.js → ...les/views/Statistic/Variations/Floated.js b/...tic/Variations/StatisticFloatedExample.js → ...les/views/Statistic/Variations/Floated.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Segment, Statistic } from 'stardust'
 
-const StatisticFloatedExample = () => (
+const Floated = () => (
   <Segment>
     <Statistic floated='right' label='Views' value='2,204' />
 
@@ -32,4 +32,4 @@ const StatisticFloatedExample = () => (
   </Segment>
 )
 
-export default StatisticFloatedExample
+export default Floated
diff --git a/docs/app/Examples/views/Statistic/Variations/Horizontal.js b/docs/app/Examples/views/Statistic/Variations/Horizontal.js
@@ -0,0 +1,6 @@
+import React from 'react'
+import { Statistic } from 'stardust'
+
+const Horizontal = () => <Statistic horizontal value='2,204' label='Views' />
+
+export default Horizontal
diff --git a/docs/app/Examples/views/Statistic/Variations/HorizontalGroup.js b/docs/app/Examples/views/Statistic/Variations/HorizontalGroup.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Statistic } from 'stardust'
+
+const items = [
+  { label: 'Views', value: '2,204' },
+  { label: 'Downloads', value: '3,322' },
+  { label: 'Tasks', value: '22' },
+]
+
+const HorizontalGroup = () => <Statistic.Group horizontal items={items} />
+
+export default HorizontalGroup
diff --git a/...ic/Variations/StatisticInvertedExample.js → ...es/views/Statistic/Variations/Inverted.js b/...ic/Variations/StatisticInvertedExample.js → ...es/views/Statistic/Variations/Inverted.js
@@ -3,7 +3,7 @@ import { Segment, Statistic } from 'stardust'
 
 // TODO: Update <Segment> usage after <Segment> will be updated to v1 API
 
-const StatisticInvertedExample = () => (
+const Inverted = () => (
   <Segment className='inverted'>
     <Statistic inverted value='54' label='inverted' />
     <Statistic inverted color='red' value='27' label='red' />
@@ -21,4 +21,4 @@ const StatisticInvertedExample = () => (
   </Segment>
 )
 
-export default StatisticInvertedExample
+export default Inverted
diff --git a/...istic/Variations/StatisticSizeExamples.js → ...amples/views/Statistic/Variations/Size.js b/...istic/Variations/StatisticSizeExamples.js → ...amples/views/Statistic/Variations/Size.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'stardust'
 
-const StatisticSizeExamples = () => (
+const Size = () => (
   <div>
     <Statistic size='mini' label='Views' value='2,204' />
     <Statistic size='tiny' label='Views' value='2,204' />
@@ -12,4 +12,4 @@ const StatisticSizeExamples = () => (
   </div>
 )
 
-export default StatisticSizeExamples
+export default Size
diff --git a/...ariations/StatisticSizeDividedExamples.js → ...views/Statistic/Variations/SizeDivided.js b/...ariations/StatisticSizeDividedExamples.js → ...views/Statistic/Variations/SizeDivided.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Divider, Statistic } from 'stardust'
 
-const StatisticSizeDividedExamples = () => (
+const SizeDivided = () => (
   <div>
     <Statistic size='mini' label='Views' value='2,204' />
     <Divider />
@@ -22,4 +22,4 @@ const StatisticSizeDividedExamples = () => (
   </div>
 )
 
-export default StatisticSizeDividedExamples
+export default SizeDivided