fix(List): Update to v1 API (#551)

* fix(Label): Update to v1 API * fix(Label): Update to v1 API * fix(routes): remove legacy list route * feat(List): More docs * feat(List): More docs * feat(List): More docs * fix(List): Update List usage * feat(List): More docs * feat(List): add tests * fix(List): fix review issues * fix(List): update test
Semantic-Org · Oct 1, 2016 · 8dd3e11 · 8dd3e11
1 parent a89545d
commit 8dd3e11
Show file tree

Hide file tree

Showing 87 changed files with 1,689 additions and 710 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js
@@ -93,15 +93,15 @@ export default class ComponentDoc extends Component {
       const { type, name } = seeMeta
 
       return (
-        <Link key={description} to={`/${type}s/${_.kebabCase(name)}`} className='item'>
+        <List.Item as={Link} key={description} to={`/${type}s/${_.kebabCase(name)}`}>
           {description}
-        </Link>
+        </List.Item>
       )
     })
 
     // still render empty lists to reserve the whitespace
     return (
-      <List className='small horizontal link' style={{ display: 'block' }}>
+      <List link horizontal size='small' style={{ display: 'block' }}>
         <List.Item>
           <Header size='tiny' color='grey'>
             {seeLinks.length > 0 ? 'See:' : ' '}
@@ -118,10 +118,13 @@ export default class ComponentDoc extends Component {
     if (META.isAddon(_meta)) return null
 
     return (
-      <List.Item icon='book'>
-        <a href={getSemanticUIDocsUrl(_meta)} target='_blank'>
-          Semantic UI {_meta.parent || _meta.name} Docs
-        </a>
+      <List.Item>
+        <List.Icon name='book' />
+        <List.Content>
+          <a href={getSemanticUIDocsUrl(_meta)} target='_blank'>
+            Semantic UI {_meta.parent || _meta.name} Docs
+          </a>
+        </List.Content>
       </List.Item>
     )
   }
@@ -132,10 +135,13 @@ export default class ComponentDoc extends Component {
     // no matter the OS path separator, use '/' since these link to github
     const posixPath = docPath.replace(pathSepRegEx, '/')
     return (
-      <List.Item icon='github'>
-        <code>
-          <a href={getGithubSourceUrl(_meta.name)} target='_blank'>{posixPath}</a>
-        </code>
+      <List.Item>
+        <List.Icon name='github' />
+        <List.Content>
+          <code>
+            <a href={getGithubSourceUrl(_meta.name)} target='_blank'>{posixPath}</a>
+          </code>
+        </List.Content>
       </List.Item>
     )
   }
@@ -228,7 +234,7 @@ export default class ComponentDoc extends Component {
             <Grid.Column>
               {this.renderHeader()}
               {this.renderSee()}
-              <List className='link' style={linkListStyle}>
+              <List link style={linkListStyle}>
                 {this.renderGithubSourceLink()}
                 {this.renderSemanticDocsLink()}
               </List>

diff --git a/docs/app/Examples/elements/List/Content/ListContentExamples.js b/docs/app/Examples/elements/List/Content/ListContentExamples.js
diff --git a/docs/app/Examples/elements/List/Content/ListDescriptionExample.js b/docs/app/Examples/elements/List/Content/ListDescriptionExample.js
diff --git a/docs/app/Examples/elements/List/Content/ListExampleDescription.js b/docs/app/Examples/elements/List/Content/ListExampleDescription.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListExampleDescription = () => (
+  <List>
+    <List.Item>
+      <List.Icon name='map marker' />
+      <List.Content>
+        <List.Header as='a'>Krowlewskie Jadlo</List.Header>
+        <List.Description>An excellent polish restaurant, quick delivery and hearty, filling meals.</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <List.Icon name='map marker' />
+      <List.Content>
+        <List.Header as='a'>Xian Famous Foods</List.Header>
+        <List.Description>
+          A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.
+        </List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <List.Icon name='map marker' />
+      <List.Content>
+        <List.Header as='a'>Sapporo Haru</List.Header>
+        <List.Description>Greenpoint's best choice for quick and delicious sushi.</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <List.Icon name='map marker' />
+      <List.Content>
+        <List.Header as='a'>Enid's</List.Header>
+        <List.Description>At night a bar, during the day a delicious brunch spot.</List.Description>
+      </List.Content>
+    </List.Item>
+  </List>
+)
+
+export default ListExampleDescription
diff --git a/docs/app/Examples/elements/List/Content/ListExampleHeader.js b/docs/app/Examples/elements/List/Content/ListExampleHeader.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListExampleHeader = () => (
+  <List>
+    <List.Item>
+      <List.Header>New York City</List.Header>
+      A lovely city
+    </List.Item>
+    <List.Item>
+      <List.Header>Chicago</List.Header>
+      Also quite a lovely city
+    </List.Item>
+    <List.Item>
+      <List.Header>Los Angeles</List.Header>
+      Sometimes can be a lovely city
+    </List.Item>
+    <List.Item>
+      <List.Header>San Francisco</List.Header>
+      What a lovely city
+    </List.Item>
+  </List>
+)
+
+export default ListExampleHeader
diff --git a/docs/app/Examples/elements/List/Content/ListExampleIcon.js b/docs/app/Examples/elements/List/Content/ListExampleIcon.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Icon, List } from 'stardust'
+
+const ListExampleIcon = () => (
+  <List>
+    <List.Item as='a'>
+      <Icon name='help' />
+      <List.Content>
+        <List.Header>Floated Icon</List.Header>
+        <List.Description>
+          This text will always have a left margin to make sure it sits alongside your icon
+        </List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item as='a'>
+      <Icon name='right triangle' />
+      <List.Content>
+        <List.Header>Icon Alignment</List.Header>
+        <List.Description>
+          Floated icons are by default top aligned. To have an icon top aligned try this example.
+        </List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <Icon name='help' />
+      Inline Text
+    </List.Item>
+  </List>
+)
+
+export default ListExampleIcon
diff --git a/docs/app/Examples/elements/List/Content/ListExampleImage.js b/docs/app/Examples/elements/List/Content/ListExampleImage.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import { List, Image } from 'stardust'
+
+const ListExampleImage = () => (
+  <List>
+    <List.Item>
+      <Image avatar src='http://semantic-ui.com/images/avatar2/small/rachel.png' />
+      <List.Content>
+        <List.Header as='a'>Rachel</List.Header>
+        <List.Description>Last seen watching <a><b>Arrested Development</b></a> just now.</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <Image avatar src='http://semantic-ui.com/images/avatar2/small/lindsay.png' />
+      <List.Content>
+        <List.Header as='a'>Lindsay</List.Header>
+        <List.Description>Last seen watching <a><b>Bob's Burgers</b></a> 10 hours ago.</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <Image avatar src='http://semantic-ui.com/images/avatar2/small/matthew.png' />
+      <List.Content>
+        <List.Header as='a'>Matthew</List.Header>
+        <List.Description>Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <Image avatar src='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
+      <List.Content>
+        <List.Header as='a'>Jenny Hess</List.Header>
+        <List.Description>Last seen watching <a><b>Twin Peaks</b></a> 3 days ago.</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <Image avatar src='http://semantic-ui.com/images/avatar/small/veronika.jpg' />
+      <List.Content>
+        <List.Header as='a'>Veronika Ossi</List.Header>
+        <List.Description>Has not watched anything recently</List.Description>
+      </List.Content>
+    </List.Item>
+  </List>
+)
+
+export default ListExampleImage
diff --git a/docs/app/Examples/elements/List/Content/ListExampleItem.js b/docs/app/Examples/elements/List/Content/ListExampleItem.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListExampleItem = () => (
+  <List>
+    <List.Item>1</List.Item>
+    <List.Item>2</List.Item>
+    <List.Item>3</List.Item>
+  </List>
+)
+
+export default ListExampleItem
diff --git a/docs/app/Examples/elements/List/Content/ListExampleLink.js b/docs/app/Examples/elements/List/Content/ListExampleLink.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListExampleLink = () => (
+  <List>
+    <List.Item as='a'>What is a FAQ?</List.Item>
+    <List.Item as='a'>Who is our user?</List.Item>
+    <List.Item as='a'>Where is our office located?</List.Item>
+  </List>
+)
+
+export default ListExampleLink
diff --git a/docs/app/Examples/elements/List/Content/ListExampleLinkComplex.js b/docs/app/Examples/elements/List/Content/ListExampleLinkComplex.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListExampleLinkComplex = () => (
+  <List>
+    <List.Item>
+      <List.Header as='a'>Header</List.Header>
+      <List.Description>
+        Click a link in our <a>description</a>.
+      </List.Description>
+    </List.Item>
+    <List.Item>
+      <List.Header as='a'>Learn More</List.Header>
+      <List.Description>
+        Learn more about this site on <a>our FAQ page</a>.
+      </List.Description>
+    </List.Item>
+  </List>
+)
+
+export default ListExampleLinkComplex
diff --git a/docs/app/Examples/elements/List/Content/ListHeaderExample.js b/docs/app/Examples/elements/List/Content/ListHeaderExample.js
diff --git a/docs/app/Examples/elements/List/Content/ListIconExample.js b/docs/app/Examples/elements/List/Content/ListIconExample.js
diff --git a/docs/app/Examples/elements/List/Content/ListImageExample.js b/docs/app/Examples/elements/List/Content/ListImageExample.js
diff --git a/docs/app/Examples/elements/List/Content/ListItemExample.js b/docs/app/Examples/elements/List/Content/ListItemExample.js