diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js index 2d797f072b..597a2d92da 100644 --- 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 ( - + {description} - + ) }) // still render empty lists to reserve the whitespace return ( - +
{seeLinks.length > 0 ? 'See:' : ' '} @@ -118,10 +118,13 @@ export default class ComponentDoc extends Component { if (META.isAddon(_meta)) return null return ( - - - Semantic UI {_meta.parent || _meta.name} Docs - + + + + + Semantic UI {_meta.parent || _meta.name} Docs + + ) } @@ -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 ( - - - {posixPath} - + + + + + {posixPath} + + ) } @@ -228,7 +234,7 @@ export default class ComponentDoc extends Component { {this.renderHeader()} {this.renderSee()} - + {this.renderGithubSourceLink()} {this.renderSemanticDocsLink()} diff --git a/docs/app/Examples/elements/List/Content/ListContentExamples.js b/docs/app/Examples/elements/List/Content/ListContentExamples.js deleted file mode 100644 index 2ed92dc43b..0000000000 --- a/docs/app/Examples/elements/List/Content/ListContentExamples.js +++ /dev/null @@ -1,42 +0,0 @@ -import React, { Component } from 'react' -import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' -import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' - -export default class ListContentExamples extends Component { - render() { - return ( - - - - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Content/ListDescriptionExample.js b/docs/app/Examples/elements/List/Content/ListDescriptionExample.js deleted file mode 100644 index 87e755cc13..0000000000 --- a/docs/app/Examples/elements/List/Content/ListDescriptionExample.js +++ /dev/null @@ -1,23 +0,0 @@ -import React, { Component } from 'react' -import { Icon, List } from 'stardust' - -export default class ListDescriptionExample extends Component { - render() { - const mapIcon = - - return ( - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Content/ListExampleDescription.js b/docs/app/Examples/elements/List/Content/ListExampleDescription.js new file mode 100644 index 0000000000..4ad9c9df65 --- /dev/null +++ b/docs/app/Examples/elements/List/Content/ListExampleDescription.js @@ -0,0 +1,39 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleDescription = () => ( + + + + + Krowlewskie Jadlo + An excellent polish restaurant, quick delivery and hearty, filling meals. + + + + + + Xian Famous Foods + + A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers. + + + + + + + Sapporo Haru + Greenpoint's best choice for quick and delicious sushi. + + + + + + Enid's + At night a bar, during the day a delicious brunch spot. + + + +) + +export default ListExampleDescription diff --git a/docs/app/Examples/elements/List/Content/ListExampleHeader.js b/docs/app/Examples/elements/List/Content/ListExampleHeader.js new file mode 100644 index 0000000000..a4b7a4c83c --- /dev/null +++ b/docs/app/Examples/elements/List/Content/ListExampleHeader.js @@ -0,0 +1,25 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleHeader = () => ( + + + New York City + A lovely city + + + Chicago + Also quite a lovely city + + + Los Angeles + Sometimes can be a lovely city + + + San Francisco + What a lovely city + + +) + +export default ListExampleHeader diff --git a/docs/app/Examples/elements/List/Content/ListExampleIcon.js b/docs/app/Examples/elements/List/Content/ListExampleIcon.js new file mode 100644 index 0000000000..b9e8d0c167 --- /dev/null +++ b/docs/app/Examples/elements/List/Content/ListExampleIcon.js @@ -0,0 +1,31 @@ +import React from 'react' +import { Icon, List } from 'stardust' + +const ListExampleIcon = () => ( + + + + + Floated Icon + + This text will always have a left margin to make sure it sits alongside your icon + + + + + + + Icon Alignment + + Floated icons are by default top aligned. To have an icon top aligned try this example. + + + + + + Inline Text + + +) + +export default ListExampleIcon diff --git a/docs/app/Examples/elements/List/Content/ListExampleImage.js b/docs/app/Examples/elements/List/Content/ListExampleImage.js new file mode 100644 index 0000000000..1cf69040b2 --- /dev/null +++ b/docs/app/Examples/elements/List/Content/ListExampleImage.js @@ -0,0 +1,44 @@ +import React from 'react' +import { List, Image } from 'stardust' + +const ListExampleImage = () => ( + + + + + Rachel + Last seen watching Arrested Development just now. + + + + + + Lindsay + Last seen watching Bob's Burgers 10 hours ago. + + + + + + Matthew + Last seen watching The Godfather Part 2 yesterday. + + + + + + Jenny Hess + Last seen watching Twin Peaks 3 days ago. + + + + + + Veronika Ossi + Has not watched anything recently + + + +) + +export default ListExampleImage diff --git a/docs/app/Examples/elements/List/Content/ListExampleItem.js b/docs/app/Examples/elements/List/Content/ListExampleItem.js new file mode 100644 index 0000000000..e8956a1753 --- /dev/null +++ b/docs/app/Examples/elements/List/Content/ListExampleItem.js @@ -0,0 +1,12 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleItem = () => ( + + 1 + 2 + 3 + +) + +export default ListExampleItem diff --git a/docs/app/Examples/elements/List/Content/ListExampleLink.js b/docs/app/Examples/elements/List/Content/ListExampleLink.js new file mode 100644 index 0000000000..5fc07feffc --- /dev/null +++ b/docs/app/Examples/elements/List/Content/ListExampleLink.js @@ -0,0 +1,12 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleLink = () => ( + + What is a FAQ? + Who is our user? + Where is our office located? + +) + +export default ListExampleLink diff --git a/docs/app/Examples/elements/List/Content/ListExampleLinkComplex.js b/docs/app/Examples/elements/List/Content/ListExampleLinkComplex.js new file mode 100644 index 0000000000..544531d8ee --- /dev/null +++ b/docs/app/Examples/elements/List/Content/ListExampleLinkComplex.js @@ -0,0 +1,21 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleLinkComplex = () => ( + + + Header + + Click a link in our description. + + + + Learn More + + Learn more about this site on our FAQ page. + + + +) + +export default ListExampleLinkComplex diff --git a/docs/app/Examples/elements/List/Content/ListHeaderExample.js b/docs/app/Examples/elements/List/Content/ListHeaderExample.js deleted file mode 100644 index 896cc32895..0000000000 --- a/docs/app/Examples/elements/List/Content/ListHeaderExample.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Component } from 'react' -import { List } from 'stardust' - -export default class ListHeaderExample extends Component { - render() { - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Content/ListIconExample.js b/docs/app/Examples/elements/List/Content/ListIconExample.js deleted file mode 100644 index baba579785..0000000000 --- a/docs/app/Examples/elements/List/Content/ListIconExample.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { Component } from 'react' -import { Icon, List } from 'stardust' - -export default class ListIconExample extends Component { - render() { - const helpIcon = - const triangleIcon = - - return ( - - - - - This item uses child text, check the code. - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Content/ListImageExample.js b/docs/app/Examples/elements/List/Content/ListImageExample.js deleted file mode 100644 index 5e97ad08b4..0000000000 --- a/docs/app/Examples/elements/List/Content/ListImageExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import faker from 'faker' -import React, { Component } from 'react' -import { List, Image } from 'stardust' - -export default class ListImageExample extends Component { - render() { - const helenAvatar = - const christianAvatar = - const danielAvatar = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Content/ListItemExample.js b/docs/app/Examples/elements/List/Content/ListItemExample.js deleted file mode 100644 index f936ee7549..0000000000 --- a/docs/app/Examples/elements/List/Content/ListItemExample.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Component } from 'react' -import { List } from 'stardust' - -export default class ListItemExample extends Component { - render() { - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Content/ListLinkExample.js b/docs/app/Examples/elements/List/Content/ListLinkExample.js deleted file mode 100644 index 40431379b7..0000000000 --- a/docs/app/Examples/elements/List/Content/ListLinkExample.js +++ /dev/null @@ -1,17 +0,0 @@ -import React, { Component } from 'react' -import { List } from 'stardust' - -export default class ListLinkExample extends Component { - render() { - const link1 = What is a FAQ? - const link2 = Who is our user base? - const link3 = Where is our office located? - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Content/index.js b/docs/app/Examples/elements/List/Content/index.js new file mode 100644 index 0000000000..c113404945 --- /dev/null +++ b/docs/app/Examples/elements/List/Content/index.js @@ -0,0 +1,47 @@ +import React from 'react' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const ListContent = () => ( + + + + + + + + + + + + + + +) + +export default ListContent diff --git a/docs/app/Examples/elements/List/ContentVariations/ListExampleFloated.js b/docs/app/Examples/elements/List/ContentVariations/ListExampleFloated.js new file mode 100644 index 0000000000..ed233137dd --- /dev/null +++ b/docs/app/Examples/elements/List/ContentVariations/ListExampleFloated.js @@ -0,0 +1,45 @@ +import React from 'react' +import { Button, Image, List } from 'stardust' + +const ListExampleFloated = () => ( + + + + + + + + Lena + + + + + + + + + Lindsay + + + + + + + + + Mark + + + + + + + + + Molly + + + +) + +export default ListExampleFloated diff --git a/docs/app/Examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js b/docs/app/Examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js new file mode 100644 index 0000000000..f790cffd86 --- /dev/null +++ b/docs/app/Examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js @@ -0,0 +1,20 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleFloatedHorizontal = () => ( +
+ + © GitHub, Inc. + Terms + Privacy + Contact + + + + About Us + Jobs + +
+) + +export default ListExampleFloatedHorizontal diff --git a/docs/app/Examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js b/docs/app/Examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js new file mode 100644 index 0000000000..fac1cb0d5e --- /dev/null +++ b/docs/app/Examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js @@ -0,0 +1,27 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleVerticallyAligned = () => ( + + + + + Top Aligned + + + + + + Middle + + + + + + Bottom + + + +) + +export default ListExampleVerticallyAligned diff --git a/docs/app/Examples/elements/List/ContentVariations/index.js b/docs/app/Examples/elements/List/ContentVariations/index.js new file mode 100644 index 0000000000..e96636b584 --- /dev/null +++ b/docs/app/Examples/elements/List/ContentVariations/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 ListContentVariations = () => ( + + + + + + +) + +export default ListContentVariations diff --git a/docs/app/Examples/elements/List/ListExamples.js b/docs/app/Examples/elements/List/ListExamples.js deleted file mode 100644 index 8c10e6b041..0000000000 --- a/docs/app/Examples/elements/List/ListExamples.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { Component } from 'react' -import ListTypesExamples from './Types/ListTypesExamples' -import ListContentExamples from './Content/ListContentExamples' -import ListVariationsExamples from './Variations/ListVariationsExamples' - -export default class ListExamples extends Component { - render() { - return ( -
- - - -
- ) - } -} diff --git a/docs/app/Examples/elements/List/Types/ListBulletedExample.js b/docs/app/Examples/elements/List/Types/ListBulletedExample.js deleted file mode 100644 index 487192bdcc..0000000000 --- a/docs/app/Examples/elements/List/Types/ListBulletedExample.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Component } from 'react' -import { List } from 'stardust' - -export default class ListBulletedExample extends Component { - render() { - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Types/ListExampleBasic.js b/docs/app/Examples/elements/List/Types/ListExampleBasic.js new file mode 100644 index 0000000000..f700fd4c68 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleBasic.js @@ -0,0 +1,12 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleBasic = () => ( + + Apples + Pears + Oranges + +) + +export default ListExampleBasic diff --git a/docs/app/Examples/elements/List/Types/ListExampleBulleted.js b/docs/app/Examples/elements/List/Types/ListExampleBulleted.js new file mode 100644 index 0000000000..da56842ac8 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleBulleted.js @@ -0,0 +1,21 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleBulleted = () => ( + + Gaining Access + Inviting Friends + +
Benefits
+ + + Link to somewhere + Rebates + Discounts + + + Warranty + +) + +export default ListExampleBulleted diff --git a/docs/app/Examples/elements/List/Types/ListExampleBulletedHorizontal.js b/docs/app/Examples/elements/List/Types/ListExampleBulletedHorizontal.js new file mode 100644 index 0000000000..67183dd81d --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleBulletedHorizontal.js @@ -0,0 +1,12 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleBulletedHorizontal = () => ( + + About Us + Sitemap + Contact + +) + +export default ListExampleBulletedHorizontal diff --git a/docs/app/Examples/elements/List/Types/ListExampleBulletedSimple.js b/docs/app/Examples/elements/List/Types/ListExampleBulletedSimple.js new file mode 100644 index 0000000000..217e57adc8 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleBulletedSimple.js @@ -0,0 +1,23 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleBulletedSimple = () => ( + + Gaining Access + Inviting Friends + + Benefits + + + + Link to somewhere + + Rebates + Discounts + + + Warranty + +) + +export default ListExampleBulletedSimple diff --git a/docs/app/Examples/elements/List/Types/ListExampleDivided.js b/docs/app/Examples/elements/List/Types/ListExampleDivided.js new file mode 100644 index 0000000000..93afbcb498 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleDivided.js @@ -0,0 +1,30 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleDivided = () => ( + + + + + Semantic-Org/Semantic-UI + Updated 10 mins ago + + + + + + Semantic-Org/Semantic-UI-Docs + Updated 22 mins ago + + + + + + Semantic-Org/Semantic-UI-Meteor + Updated 34 mins ago + + + +) + +export default ListExampleDivided diff --git a/docs/app/Examples/elements/List/Types/ListExampleIcon.js b/docs/app/Examples/elements/List/Types/ListExampleIcon.js new file mode 100644 index 0000000000..b777d99d67 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleIcon.js @@ -0,0 +1,29 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleIcon = () => ( + + + + Semantic UI + + + + New York, NY + + + + + jack@semantic-ui.com + + + + + + semantic-ui.com + + + +) + +export default ListExampleIcon diff --git a/docs/app/Examples/elements/List/Types/ListExampleLink.js b/docs/app/Examples/elements/List/Types/ListExampleLink.js new file mode 100644 index 0000000000..76aa7c75c6 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleLink.js @@ -0,0 +1,13 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleLink = () => ( + + Home + About + Jobs + Team + +) + +export default ListExampleLink diff --git a/docs/app/Examples/elements/List/Types/ListExampleOrdered.js b/docs/app/Examples/elements/List/Types/ListExampleOrdered.js new file mode 100644 index 0000000000..7c288271da --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleOrdered.js @@ -0,0 +1,20 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleOrdered = () => ( + + Getting Started + Introduction + + Languages + + HTML + Javascript + CSS + + + Review + +) + +export default ListExampleOrdered diff --git a/docs/app/Examples/elements/List/Types/ListExampleOrderedSimple.js b/docs/app/Examples/elements/List/Types/ListExampleOrderedSimple.js new file mode 100644 index 0000000000..f897b1765f --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleOrderedSimple.js @@ -0,0 +1,19 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleOrderedSimple = () => ( + + Signing Up + User Benefits + User Types + + Admin + Power User + Regular User + + + Deleting Your Account + +) + +export default ListExampleOrderedSimple diff --git a/docs/app/Examples/elements/List/Types/ListExampleOrderedValue.js b/docs/app/Examples/elements/List/Types/ListExampleOrderedValue.js new file mode 100644 index 0000000000..e34f798551 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleOrderedValue.js @@ -0,0 +1,20 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleOrderedValue = () => ( + + Signing Up + User Benefits + + User Types + + Admin + Power User + Regular User + + + Deleting Your Account + +) + +export default ListExampleOrderedValue diff --git a/docs/app/Examples/elements/List/Types/ListExampleTree.js b/docs/app/Examples/elements/List/Types/ListExampleTree.js new file mode 100644 index 0000000000..0dd8bb4ba2 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/ListExampleTree.js @@ -0,0 +1,78 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleTree = () => ( + + + + + src + Source files for project + + + + + site + Your site's theme + + + + + + themes + Packaged theme files + + + + + default + Default packaged theme + + + + + + my_theme + Packaged themes are also available in this folder + + + + + + + + + theme.config + Config file for setting packaged themes + + + + + + + + + dist + Compiled CSS and JS files + + + + + components + Individual component CSS and JS + + + + + + + + + semantic.json + Contains build settings for gulp + + + +) + +export default ListExampleTree diff --git a/docs/app/Examples/elements/List/Types/ListLinkExample.js b/docs/app/Examples/elements/List/Types/ListLinkExample.js deleted file mode 100644 index 46934a3ca3..0000000000 --- a/docs/app/Examples/elements/List/Types/ListLinkExample.js +++ /dev/null @@ -1,19 +0,0 @@ -import React, { Component } from 'react' -import { List } from 'stardust' - -export default class ListLinkExample extends Component { - render() { - const link1 = Home - const link2 = About - const link3 = Services - const link4 = Careers - return ( - - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Types/ListListExample.js b/docs/app/Examples/elements/List/Types/ListListExample.js deleted file mode 100644 index da1f154694..0000000000 --- a/docs/app/Examples/elements/List/Types/ListListExample.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Component } from 'react' -import { List } from 'stardust' - -export default class ListListExample extends Component { - render() { - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Types/ListOrderedExample.js b/docs/app/Examples/elements/List/Types/ListOrderedExample.js deleted file mode 100644 index 8ddd107e87..0000000000 --- a/docs/app/Examples/elements/List/Types/ListOrderedExample.js +++ /dev/null @@ -1,20 +0,0 @@ -import React, { Component } from 'react' -import { List } from 'stardust' - -export default class ListOrderedExample extends Component { - render() { - return ( - - - - - - - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Types/ListTypesExamples.js b/docs/app/Examples/elements/List/Types/ListTypesExamples.js deleted file mode 100644 index 8d96bd93a2..0000000000 --- a/docs/app/Examples/elements/List/Types/ListTypesExamples.js +++ /dev/null @@ -1,32 +0,0 @@ -import React, { Component } from 'react' -import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' -import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' - -export default class ListTypesExamples extends Component { - render() { - return ( - - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Types/index.js b/docs/app/Examples/elements/List/Types/index.js new file mode 100644 index 0000000000..375f6b49c6 --- /dev/null +++ b/docs/app/Examples/elements/List/Types/index.js @@ -0,0 +1,46 @@ +import React from 'react' +import { Message } from 'stardust' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const ListTypes = () => ( + + + + + + + + + + + + + + + You can also manually specify a value for an ordered list using value. + + + + + +) + +export default ListTypes diff --git a/docs/app/Examples/elements/List/Variations/ListAnimatedExample.js b/docs/app/Examples/elements/List/Variations/ListAnimatedExample.js deleted file mode 100644 index f1880e9083..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListAnimatedExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import faker from 'faker' -import React, { Component } from 'react' -import { List, Image } from 'stardust' - -export default class ListAnimatedExample extends Component { - render() { - const avatar1 = - const avatar2 = - const avatar3 = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListCelledExample.js b/docs/app/Examples/elements/List/Variations/ListCelledExample.js deleted file mode 100644 index 4294c9fee2..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListCelledExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import faker from 'faker' -import React, { Component } from 'react' -import { List, Image } from 'stardust' - -export default class ListCelledExample extends Component { - render() { - const avatar1 = - const avatar2 = - const avatar3 = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListDividedExample.js b/docs/app/Examples/elements/List/Variations/ListDividedExample.js deleted file mode 100644 index 6bb3ed42f1..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListDividedExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import faker from 'faker' -import React, { Component } from 'react' -import { List, Image } from 'stardust' - -export default class ListDividedExample extends Component { - render() { - const avatar1 = - const avatar2 = - const avatar3 = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListExampleAnimated.js b/docs/app/Examples/elements/List/Variations/ListExampleAnimated.js new file mode 100644 index 0000000000..13a1dda5bf --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleAnimated.js @@ -0,0 +1,27 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleAnimated = () => ( + + + + + Helen + + + + + + Christian + + + + + + Daniel + + + +) + +export default ListExampleAnimated diff --git a/docs/app/Examples/elements/List/Variations/ListExampleCelled.js b/docs/app/Examples/elements/List/Variations/ListExampleCelled.js new file mode 100644 index 0000000000..238e8a8c92 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleCelled.js @@ -0,0 +1,30 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleCelled = () => ( + + + + + Snickerdoodle + An excellent companion + + + + + + Poodle + A poodle, its pretty basic + + + + + + Paulo + He's also a dog + + + +) + +export default ListExampleCelled diff --git a/docs/app/Examples/elements/List/Variations/ListExampleCelledHorizontal.js b/docs/app/Examples/elements/List/Variations/ListExampleCelledHorizontal.js new file mode 100644 index 0000000000..39d6b7e917 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleCelledHorizontal.js @@ -0,0 +1,12 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleCelledHorizontal = () => ( + + About Us + Contact + Support + +) + +export default ListExampleCelledHorizontal diff --git a/docs/app/Examples/elements/List/Variations/ListExampleCelledOrdered.js b/docs/app/Examples/elements/List/Variations/ListExampleCelledOrdered.js new file mode 100644 index 0000000000..444e6adbda --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleCelledOrdered.js @@ -0,0 +1,18 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleCelledOrdered = () => ( + + Cats + Horses + Dogs + + Labradoodles + Shiba Inu + Mastiff + + + +) + +export default ListExampleCelledOrdered diff --git a/docs/app/Examples/elements/List/Variations/ListExampleDivided.js b/docs/app/Examples/elements/List/Variations/ListExampleDivided.js new file mode 100644 index 0000000000..6a54e7301d --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleDivided.js @@ -0,0 +1,27 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleDivided = () => ( + + + + + Daniel Louise + + + + + + Stevie Feliciano + + + + + + Elliot Fu + + + +) + +export default ListExampleDivided diff --git a/docs/app/Examples/elements/List/Variations/ListExampleHorizontal.js b/docs/app/Examples/elements/List/Variations/ListExampleHorizontal.js new file mode 100644 index 0000000000..f6ad2513f6 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleHorizontal.js @@ -0,0 +1,30 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleHorizontal = () => ( + + + + + Tom + Top Contributor + + + + + + Christian Rocha + Admin + + + + + + Matt + Top Rated User + + + +) + +export default ListExampleHorizontal diff --git a/docs/app/Examples/elements/List/Variations/ListExampleHorizontalBulleted.js b/docs/app/Examples/elements/List/Variations/ListExampleHorizontalBulleted.js new file mode 100644 index 0000000000..5c620905a8 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleHorizontalBulleted.js @@ -0,0 +1,12 @@ +import React from 'react' +import { List } from 'stardust' + +const ListExampleHorizontalBulleted = () => ( + + Terms and Conditions + Privacy Policy + Contact Us + +) + +export default ListExampleHorizontalBulleted diff --git a/docs/app/Examples/elements/List/Variations/ListExampleHorizontalOrdered.js b/docs/app/Examples/elements/List/Variations/ListExampleHorizontalOrdered.js new file mode 100644 index 0000000000..4ff424bf12 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleHorizontalOrdered.js @@ -0,0 +1,30 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleHorizontalOrdered = () => ( + + + + + Tom + Top Contributor + + + + + + Christian Rocha + Admin + + + + + + Matt + Top Rated User + + + +) + +export default ListExampleHorizontalOrdered diff --git a/docs/app/Examples/elements/List/Variations/ListExampleInverted.js b/docs/app/Examples/elements/List/Variations/ListExampleInverted.js new file mode 100644 index 0000000000..3ce357fa79 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleInverted.js @@ -0,0 +1,29 @@ +import React from 'react' +import { List, Segment } from 'stardust' + +const ListExampleInverted = () => ( + + + + + Snickerdoodle + An excellent companion + + + + + Poodle + A poodle, its pretty basic + + + + + Paulo + He's also a dog + + + + +) + +export default ListExampleInverted diff --git a/docs/app/Examples/elements/List/Variations/ListExampleRelaxed.js b/docs/app/Examples/elements/List/Variations/ListExampleRelaxed.js new file mode 100644 index 0000000000..0e5072d0e5 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleRelaxed.js @@ -0,0 +1,30 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleRelaxed = () => ( + + + + + Daniel Louise + Last seen watching Arrested Development just now. + + + + + + Stevie Feliciano + Last seen watching Bob's Burgers 10 hours ago. + + + + + + Elliot Fu + Last seen watching The Godfather Part 2 yesterday. + + + +) + +export default ListExampleRelaxed diff --git a/docs/app/Examples/elements/List/Variations/ListExampleRelaxedHorizontal.js b/docs/app/Examples/elements/List/Variations/ListExampleRelaxedHorizontal.js new file mode 100644 index 0000000000..d6c3b496eb --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleRelaxedHorizontal.js @@ -0,0 +1,27 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleRelaxedHorizontal = () => ( + + + + + Daniel Louise + + + + + + Stevie Feliciano + + + + + + Elliot Fu + + + +) + +export default ListExampleRelaxedHorizontal diff --git a/docs/app/Examples/elements/List/Variations/ListExampleSelection.js b/docs/app/Examples/elements/List/Variations/ListExampleSelection.js new file mode 100644 index 0000000000..ec8a85459e --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleSelection.js @@ -0,0 +1,27 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleSelection = () => ( + + + + + Helen + + + + + + Christian + + + + + + Daniel + + + +) + +export default ListExampleSelection diff --git a/docs/app/Examples/elements/List/Variations/ListExampleSizes.js b/docs/app/Examples/elements/List/Variations/ListExampleSizes.js new file mode 100644 index 0000000000..b9b6ec2043 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleSizes.js @@ -0,0 +1,39 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleSizes = () => { + const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'] + + return ( +
+ {sizes.map(size => ( +
+ + + + + Helen + + + + + + Christian + + + + + + Daniel + + + + +
+
+ ))} +
+ ) +} + +export default ListExampleSizes diff --git a/docs/app/Examples/elements/List/Variations/ListExampleVeryRelaxed.js b/docs/app/Examples/elements/List/Variations/ListExampleVeryRelaxed.js new file mode 100644 index 0000000000..fa14d3467d --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleVeryRelaxed.js @@ -0,0 +1,30 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleVeryRelaxed = () => ( + + + + + Daniel Louise + Last seen watching Arrested Development just now. + + + + + + Stevie Feliciano + Last seen watching Bob's Burgers 10 hours ago. + + + + + + Elliot Fu + Last seen watching The Godfather Part 2 yesterday. + + + +) + +export default ListExampleVeryRelaxed diff --git a/docs/app/Examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js b/docs/app/Examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js new file mode 100644 index 0000000000..f1e08840bd --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js @@ -0,0 +1,27 @@ +import React from 'react' +import { Image, List } from 'stardust' + +const ListExampleVeryRelaxedHorizontal = () => ( + + + + + Daniel Louise + + + + + + Stevie Feliciano + + + + + + Elliot Fu + + + +) + +export default ListExampleVeryRelaxedHorizontal diff --git a/docs/app/Examples/elements/List/Variations/ListHorizontalExample.js b/docs/app/Examples/elements/List/Variations/ListHorizontalExample.js deleted file mode 100644 index 903fe308bb..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListHorizontalExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import faker from 'faker' -import React, { Component } from 'react' -import { List, Image } from 'stardust' - -export default class ListHorizontalExample extends Component { - render() { - const image1 = - const image2 = - const image3 = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListInvertedExample.js b/docs/app/Examples/elements/List/Variations/ListInvertedExample.js deleted file mode 100644 index 1f121037f2..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListInvertedExample.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { Component } from 'react' -import { Segment, List } from 'stardust' - -export default class ListInvertedExample extends Component { - render() { - return ( - - - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListRelaxedExample.js b/docs/app/Examples/elements/List/Variations/ListRelaxedExample.js deleted file mode 100644 index c57e7c38ce..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListRelaxedExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import faker from 'faker' -import React, { Component } from 'react' -import { List, Image } from 'stardust' - -export default class ListRelaxedExample extends Component { - render() { - const avatar1 = - const avatar2 = - const avatar3 = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListSelectionExample.js b/docs/app/Examples/elements/List/Variations/ListSelectionExample.js deleted file mode 100644 index edcf26b3a5..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListSelectionExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import faker from 'faker' -import React, { Component } from 'react' -import { List, Image } from 'stardust' - -export default class ListSelectionExample extends Component { - render() { - const avatar1 = - const avatar2 = - const avatar3 = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListSizeBigExample.js b/docs/app/Examples/elements/List/Variations/ListSizeBigExample.js deleted file mode 100644 index f0794e8171..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListSizeBigExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import { List, Image } from 'stardust' -import faker from 'faker' - -export default class ListSizeBigExample extends Component { - render() { - const helenAvatar = - const christianAvatar = - const danielAvatar = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListSizeHugeExample.js b/docs/app/Examples/elements/List/Variations/ListSizeHugeExample.js deleted file mode 100644 index 7c22e2baa0..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListSizeHugeExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import { List, Image } from 'stardust' -import faker from 'faker' - -export default class ListSizeHugeExample extends Component { - render() { - const helenAvatar = - const christianAvatar = - const danielAvatar = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListSizeLargeExample.js b/docs/app/Examples/elements/List/Variations/ListSizeLargeExample.js deleted file mode 100644 index ebe8364c3f..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListSizeLargeExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import { List, Image } from 'stardust' -import faker from 'faker' - -export default class ListSizeLargeExample extends Component { - render() { - const helenAvatar = - const christianAvatar = - const danielAvatar = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListSizeMassiveExample.js b/docs/app/Examples/elements/List/Variations/ListSizeMassiveExample.js deleted file mode 100644 index 51be451dd3..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListSizeMassiveExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import { List, Image } from 'stardust' -import faker from 'faker' - -export default class ListSizeMassiveExample extends Component { - render() { - const helenAvatar = - const christianAvatar = - const danielAvatar = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListSizeMiniExample.js b/docs/app/Examples/elements/List/Variations/ListSizeMiniExample.js deleted file mode 100644 index c64118a255..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListSizeMiniExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import { List, Image } from 'stardust' -import faker from 'faker' - -export default class ListSizeMiniExample extends Component { - render() { - const helenAvatar = - const christianAvatar = - const danielAvatar = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListSizeSmallExample.js b/docs/app/Examples/elements/List/Variations/ListSizeSmallExample.js deleted file mode 100644 index d1592fd1c0..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListSizeSmallExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import { List, Image } from 'stardust' -import faker from 'faker' - -export default class ListSizeSmallExample extends Component { - render() { - const helenAvatar = - const christianAvatar = - const danielAvatar = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListSizeTinyExample.js b/docs/app/Examples/elements/List/Variations/ListSizeTinyExample.js deleted file mode 100644 index 5ac87dfa14..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListSizeTinyExample.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import { List, Image } from 'stardust' -import faker from 'faker' - -export default class ListSizeTinyExample extends Component { - render() { - const helenAvatar = - const christianAvatar = - const danielAvatar = - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListVariationsExamples.js b/docs/app/Examples/elements/List/Variations/ListVariationsExamples.js deleted file mode 100644 index 455a5d9253..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListVariationsExamples.js +++ /dev/null @@ -1,67 +0,0 @@ -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 ListVariationsExamples extends Component { - render() { - return ( - - - - - - - Be sure content can fit on one line, otherwise text content will reflow when hovered. - - - - - - - - - - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/ListVeryRelaxedExample.js b/docs/app/Examples/elements/List/Variations/ListVeryRelaxedExample.js deleted file mode 100644 index 18f6839238..0000000000 --- a/docs/app/Examples/elements/List/Variations/ListVeryRelaxedExample.js +++ /dev/null @@ -1,19 +0,0 @@ -import React, { Component } from 'react' -import { List, Image } from 'stardust' -import faker from 'faker' - -export default class ListVeryRelaxedExample extends Component { - render() { - const avatar1 = - const avatar2 = - const avatar3 = - - return ( - - - - - - ) - } -} diff --git a/docs/app/Examples/elements/List/Variations/index.js b/docs/app/Examples/elements/List/Variations/index.js new file mode 100644 index 0000000000..8a31700d98 --- /dev/null +++ b/docs/app/Examples/elements/List/Variations/index.js @@ -0,0 +1,70 @@ +import React from 'react' +import { Message } from 'stardust' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const ListVariations = () => ( + + + + + + + + + + + + Be sure content can fit on one line, otherwise text content will reflow when hovered. + + + + + + + + + + + + + + + + +) + +export default ListVariations diff --git a/docs/app/Examples/elements/List/index.js b/docs/app/Examples/elements/List/index.js new file mode 100644 index 0000000000..ed6f7cc467 --- /dev/null +++ b/docs/app/Examples/elements/List/index.js @@ -0,0 +1,17 @@ +import React from 'react' + +import Content from './Content' +import ContentVariations from './ContentVariations' +import Types from './Types' +import Variations from './Variations' + +const ListExamples = () => ( +
+ + + + +
+) + +export default ListExamples diff --git a/docs/app/routes.js b/docs/app/routes.js index 6ed083cc94..2c0f2302f9 100644 --- a/docs/app/routes.js +++ b/docs/app/routes.js @@ -3,25 +3,14 @@ import { Route, IndexRedirect } from 'react-router' import Root from './Components/Root' import Layout from './Components/Layout' -import ComponentDoc from './Components/ComponentDoc/ComponentDoc' -import PageNotFound from './Views/PageNotFound' import Introduction from './Views/Introduction' - -// TODO remove List once PR is merged and docs are updated to use index.js files -import { List } from 'stardust' -const ListDoc = () => +import PageNotFound from './Views/PageNotFound' const routes = ( - {/* TODO remove List route once open PR is merged and docs are updated to use index.js files */} - - - - - {/* v1 Routes */} diff --git a/src/elements/List/List.js b/src/elements/List/List.js index 024b85ecc8..3a7f51eba5 100644 --- a/src/elements/List/List.js +++ b/src/elements/List/List.js @@ -1,40 +1,139 @@ -import React, { Component, PropTypes } from 'react' -import classNames from 'classnames' +import cx from 'classnames' +import React, { PropTypes } from 'react' import { customPropTypes, getElementType, + getUnhandledProps, META, + SUI, + useKeyOnly, + useKeyOrValueAndKey, + useValueAndKey, + useVerticalAlignProp, } from '../../lib' +import ListContent from './ListContent' +import ListDescription from './ListDescription' +import ListHeader from './ListHeader' +import ListIcon from './ListIcon' import ListItem from './ListItem' +import ListList from './ListList' -export default class List extends Component { - static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - children: PropTypes.node, - className: PropTypes.string, - } - - static _meta = { - name: 'List', - type: META.TYPES.ELEMENT, - } - - static Item = ListItem - - render() { - const classes = classNames( - 'ui', - this.props.className, - 'list' - ) - const ElementType = getElementType(List, this.props) - return ( - - {this.props.children} - - ) - } +/** + * A list groups related content + * */ +function List(props) { + const { + animated, + bulleted, + celled, + children, + className, + divided, + floated, + horizontal, + inverted, + link, + ordered, + relaxed, + size, + selection, + verticalAlign, + } = props + const classes = cx( + 'ui', + size, + useKeyOnly(animated, 'animated'), + useKeyOnly(bulleted, 'bulleted'), + useKeyOnly(celled, 'celled'), + useKeyOnly(divided, 'divided'), + useKeyOnly(horizontal, 'horizontal'), + useKeyOnly(inverted, 'inverted'), + useKeyOnly(link, 'link'), + useKeyOnly(ordered, 'ordered'), + useKeyOnly(selection, 'selection'), + useKeyOrValueAndKey(relaxed, 'relaxed'), + useValueAndKey(floated, 'floated'), + useVerticalAlignProp(verticalAlign), + 'list', + className, + ) + + const ElementType = getElementType(List, props) + const rest = getUnhandledProps(List, props) + + return {children} +} + +List._meta = { + name: 'List', + type: META.TYPES.ELEMENT, + props: { + floated: SUI.FLOATS, + relaxed: ['very'], + size: SUI.SIZES, + verticalAlign: SUI.VERTICAL_ALIGNMENTS, + }, } + +List.propTypes = { + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** A list can animate to set the current item apart from the list. */ + animated: PropTypes.bool, + + /** A list can mark items with a bullet. */ + bulleted: PropTypes.bool, + + /** A list can divide its items into cells. */ + celled: PropTypes.bool, + + /** Primary content of the List. */ + children: PropTypes.node, + + /** Classes to add to the List className. */ + className: PropTypes.string, + + /** A list can show divisions between content. */ + divided: PropTypes.bool, + + /** An list can be floated left or right. */ + floated: PropTypes.oneOf(List._meta.props.floated), + + /** A list can be formatted to have items appear horizontally. */ + horizontal: PropTypes.bool, + + /** A list can be inverted to appear on a dark background. */ + inverted: PropTypes.bool, + + /** A list can be specially formatted for navigation links. */ + link: PropTypes.bool, + + /** A list can be ordered numerically. */ + ordered: PropTypes.bool, + + /** A list can relax its padding to provide more negative space. */ + relaxed: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.oneOf(List._meta.props.relaxed), + ]), + + /** A selection list formats list items as possible choices. */ + selection: PropTypes.bool, + + /** A list can vary in size. */ + size: PropTypes.oneOf(List._meta.props.size), + + /** An element inside a list can be vertically aligned. */ + verticalAlign: PropTypes.oneOf(List._meta.props.verticalAlign), +} + +List.Content = ListContent +List.Description = ListDescription +List.Header = ListHeader +List.Icon = ListIcon +List.Item = ListItem +List.List = ListList + +export default List diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js new file mode 100644 index 0000000000..41b70445e8 --- /dev/null +++ b/src/elements/List/ListContent.js @@ -0,0 +1,61 @@ +import cx from 'classnames' +import React, { PropTypes } from 'react' + +import { + customPropTypes, + getElementType, + getUnhandledProps, + META, + SUI, + useValueAndKey, + useVerticalAlignProp, +} from '../../lib' + +function ListContent(props) { + const { + children, + className, + floated, + verticalAlign, + } = props + const classes = cx( + useValueAndKey(floated, 'floated'), + useVerticalAlignProp(verticalAlign), + 'content', + className, + ) + + const ElementType = getElementType(ListContent, props) + const rest = getUnhandledProps(ListContent, props) + + return {children} +} + +ListContent._meta = { + name: 'ListContent', + parent: 'List', + type: META.TYPES.ELEMENT, + props: { + floated: SUI.FLOATS, + verticalAlign: SUI.VERTICAL_ALIGNMENTS, + }, +} + +ListContent.propTypes = { + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** Primary content of the ListContent. */ + children: PropTypes.node, + + /** Classes to add to the ListContent className. */ + className: PropTypes.string, + + /** An list content can be floated left or right. */ + floated: PropTypes.oneOf(ListContent._meta.props.floated), + + /** An element inside a list can be vertically aligned. */ + verticalAlign: PropTypes.oneOf(ListContent._meta.props.verticalAlign), +} + +export default ListContent diff --git a/src/elements/List/ListDescription.js b/src/elements/List/ListDescription.js new file mode 100644 index 0000000000..faf1be148d --- /dev/null +++ b/src/elements/List/ListDescription.js @@ -0,0 +1,38 @@ +import cx from 'classnames' +import React, { PropTypes } from 'react' + +import { + customPropTypes, + getElementType, + getUnhandledProps, + META, +} from '../../lib' + +function ListDescription(props) { + const { children, className } = props + const classes = cx(className, 'description') + + const ElementType = getElementType(ListDescription, props) + const rest = getUnhandledProps(ListDescription, props) + + return {children} +} + +ListDescription._meta = { + name: 'ListDescription', + parent: 'List', + type: META.TYPES.ELEMENT, +} + +ListDescription.propTypes = { + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** Primary content of the ListDescription. */ + children: PropTypes.node, + + /** Classes to add to the ListDescription className. */ + className: PropTypes.string, +} + +export default ListDescription diff --git a/src/elements/List/ListHeader.js b/src/elements/List/ListHeader.js new file mode 100644 index 0000000000..d8ff4391ca --- /dev/null +++ b/src/elements/List/ListHeader.js @@ -0,0 +1,38 @@ +import cx from 'classnames' +import React, { PropTypes } from 'react' + +import { + customPropTypes, + getElementType, + getUnhandledProps, + META, +} from '../../lib' + +function ListHeader(props) { + const { children, className } = props + const classes = cx(className, 'header') + + const ElementType = getElementType(ListHeader, props) + const rest = getUnhandledProps(ListHeader, props) + + return {children} +} + +ListHeader._meta = { + name: 'ListHeader', + parent: 'List', + type: META.TYPES.ELEMENT, +} + +ListHeader.propTypes = { + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** Primary content of the ListHeader. */ + children: PropTypes.node, + + /** Classes to add to the ListHeader className. */ + className: PropTypes.string, +} + +export default ListHeader diff --git a/src/elements/List/ListIcon.js b/src/elements/List/ListIcon.js new file mode 100644 index 0000000000..e52213925e --- /dev/null +++ b/src/elements/List/ListIcon.js @@ -0,0 +1,40 @@ +import cx from 'classnames' +import React, { PropTypes } from 'react' + +import { + getUnhandledProps, + META, + SUI, + useVerticalAlignProp, +} from '../../lib' +import { Icon } from '../' + +function ListIcon(props) { + const { className, verticalAlign } = props + const classes = cx( + useVerticalAlignProp(verticalAlign), + className + ) + const rest = getUnhandledProps(ListIcon, props) + + return +} + +ListIcon._meta = { + name: 'ListIcon', + parent: 'List', + type: META.TYPES.ELEMENT, + props: { + verticalAlign: SUI.VERTICAL_ALIGNMENTS, + }, +} + +ListIcon.propTypes = { + /** Classes to add to the ListIcon className. */ + className: PropTypes.string, + + /** An element inside a list can be vertically aligned. */ + verticalAlign: PropTypes.oneOf(ListIcon._meta.props.verticalAlign), +} + +export default ListIcon diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js index 3d7beae4e0..cd043ab1a5 100644 --- a/src/elements/List/ListItem.js +++ b/src/elements/List/ListItem.js @@ -1,54 +1,61 @@ -import React, { Component, PropTypes } from 'react' import cx from 'classnames' +import React, { PropTypes } from 'react' import { customPropTypes, getElementType, + getUnhandledProps, META, + useKeyOnly, } from '../../lib' -import { Icon, Image } from '../../elements' - -export default class ListItem extends Component { - static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - children: PropTypes.node, - className: PropTypes.string, - description: PropTypes.node, - header: PropTypes.string, - icon: PropTypes.node, - image: PropTypes.node, - } - - static _meta = { - name: 'ListItem', - type: META.TYPES.ELEMENT, - parent: 'List', - } - - render() { - const { children, className, description, header, icon, image, ...rest } = this.props - const classes = cx(className, 'item') - - const media = Icon.create(icon) || Image.create(image) - const _description = description || children - - let content = header ? [ - header &&
{header}
, - _description &&
{_description}
, - ] : ( - _description - ) - - // wrap content for icon/image layouts - if (media) content =
{content}
- const ElementType = getElementType(ListItem, this.props) - return ( - - {media} - {content} - - ) - } + +function ListItem(props) { + const { + active, + children, + className, + disabled, + value, + } = props + + const ElementType = getElementType(ListItem, props) + const classes = cx( + useKeyOnly(active, 'active'), + useKeyOnly(disabled, 'disabled'), + useKeyOnly(ElementType !== 'li', 'item'), + className, + ) + + const rest = getUnhandledProps(ListItem, props) + const valueProp = ElementType === 'li' ? { value } : { 'data-value': value } + + return {children} +} + +ListItem._meta = { + name: 'ListItem', + parent: 'List', + type: META.TYPES.ELEMENT, } + +ListItem.propTypes = { + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** A list item can active. */ + active: PropTypes.bool, + + /** Primary content of the ListItem. */ + children: PropTypes.node, + + /** Classes to add to the ListItem className. */ + className: PropTypes.string, + + /** A list item can disabled. */ + disabled: PropTypes.bool, + + /** A value for an ordered list. */ + value: PropTypes.string, +} + +export default ListItem diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js new file mode 100644 index 0000000000..19b3e287e1 --- /dev/null +++ b/src/elements/List/ListList.js @@ -0,0 +1,42 @@ +import cx from 'classnames' +import React, { PropTypes } from 'react' + +import { + customPropTypes, + getElementType, + getUnhandledProps, + META, + useKeyOnly, +} from '../../lib' + +function ListList(props) { + const { children, className } = props + + const ElementType = getElementType(ListList, props) + const classes = cx( + useKeyOnly(ElementType !== 'ul' && ElementType !== 'ol', 'list'), + className, + ) + const rest = getUnhandledProps(ListList, props) + + return {children} +} + +ListList._meta = { + name: 'ListList', + parent: 'List', + type: META.TYPES.ELEMENT, +} + +ListList.propTypes = { + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** Primary content of the ListList. */ + children: PropTypes.node, + + /** Classes to add to the ListList className. */ + className: PropTypes.string, +} + +export default ListList diff --git a/src/elements/index.js b/src/elements/index.js index 3c220a362a..d47b98b95f 100644 --- a/src/elements/index.js +++ b/src/elements/index.js @@ -25,7 +25,12 @@ export { default as Label } from './Label/Label' export { default as LabelDetail } from './Label/LabelDetail' export { default as List } from './List/List' +export { default as ListContent } from './List/ListContent' +export { default as ListDescription } from './List/ListDescription' +export { default as ListHeader } from './List/ListHeader' +export { default as ListIcon } from './List/ListIcon' export { default as ListItem } from './List/ListItem' +export { default as ListList } from './List/ListList' export { default as Loader } from './Loader/Loader' diff --git a/test/specs/elements/List/List-test.js b/test/specs/elements/List/List-test.js index 00ba3bd25e..5476fa3c4d 100644 --- a/test/specs/elements/List/List-test.js +++ b/test/specs/elements/List/List-test.js @@ -1,10 +1,30 @@ +import * as common from 'test/specs/commonTests' import List from 'src/elements/List/List' +import ListContent from 'src/elements/List/ListContent' +import ListDescription from 'src/elements/List/ListDescription' +import ListHeader from 'src/elements/List/ListHeader' +import ListIcon from 'src/elements/List/ListIcon' import ListItem from 'src/elements/List/ListItem' -import * as common from 'test/specs/commonTests' +import ListList from 'src/elements/List/ListList' describe('List', () => { common.isConformant(List) common.hasUIClassName(List) + common.hasSubComponents(List, [ListContent, ListDescription, ListHeader, ListIcon, ListItem, ListList]) common.rendersChildren(List) - common.hasSubComponents(List, [ListItem]) + + common.propKeyOnlyToClassName(List, 'animated') + common.propKeyOnlyToClassName(List, 'bulleted') + common.propKeyOnlyToClassName(List, 'celled') + common.propKeyOnlyToClassName(List, 'divided') + common.propKeyOnlyToClassName(List, 'horizontal') + common.propKeyOnlyToClassName(List, 'inverted') + common.propKeyOnlyToClassName(List, 'link') + common.propKeyOnlyToClassName(List, 'ordered') + common.propKeyOnlyToClassName(List, 'selection') + + common.propKeyAndValueToClassName(List, 'floated') + common.propKeyOrValueAndKeyToClassName(List, 'relaxed') + common.propValueOnlyToClassName(List, 'size') + common.implementsVerticalAlignProp(List) }) diff --git a/test/specs/elements/List/ListContent-test.js b/test/specs/elements/List/ListContent-test.js new file mode 100644 index 0000000000..e815d2ef77 --- /dev/null +++ b/test/specs/elements/List/ListContent-test.js @@ -0,0 +1,10 @@ +import * as common from 'test/specs/commonTests' +import ListContent from 'src/elements/List/ListContent' + +describe('ListContent', () => { + common.isConformant(ListContent) + common.rendersChildren(ListContent) + + common.implementsVerticalAlignProp(ListContent) + common.propKeyAndValueToClassName(ListContent, 'floated') +}) diff --git a/test/specs/elements/List/ListDescription-test.js b/test/specs/elements/List/ListDescription-test.js new file mode 100644 index 0000000000..0e1177f112 --- /dev/null +++ b/test/specs/elements/List/ListDescription-test.js @@ -0,0 +1,7 @@ +import * as common from 'test/specs/commonTests' +import ListDescription from 'src/elements/List/ListDescription' + +describe('ListDescription', () => { + common.isConformant(ListDescription) + common.rendersChildren(ListDescription) +}) diff --git a/test/specs/elements/List/ListHeader-test.js b/test/specs/elements/List/ListHeader-test.js new file mode 100644 index 0000000000..fe29235f56 --- /dev/null +++ b/test/specs/elements/List/ListHeader-test.js @@ -0,0 +1,7 @@ +import * as common from 'test/specs/commonTests' +import ListHeader from 'src/elements/List/ListHeader' + +describe('ListHeader', () => { + common.isConformant(ListHeader) + common.rendersChildren(ListHeader) +}) diff --git a/test/specs/elements/List/ListIcon-test.js b/test/specs/elements/List/ListIcon-test.js new file mode 100644 index 0000000000..4d1a2f4a35 --- /dev/null +++ b/test/specs/elements/List/ListIcon-test.js @@ -0,0 +1,15 @@ +import React from 'react' +import * as common from 'test/specs/commonTests' + +import Icon from 'src/elements/Icon/Icon' +import ListIcon from 'src/elements/List/ListIcon' + +describe('ListIcon', () => { + common.isConformant(ListIcon) + common.implementsVerticalAlignProp(ListIcon) + + it('returns Icon component', () => { + shallow() + .should.have.descendants(Icon) + }) +}) diff --git a/test/specs/elements/List/ListItem-test.js b/test/specs/elements/List/ListItem-test.js index dd49725058..bcfeb19ab8 100644 --- a/test/specs/elements/List/ListItem-test.js +++ b/test/specs/elements/List/ListItem-test.js @@ -1,7 +1,36 @@ -import ListItem from 'src/elements/List/ListItem' +import faker from 'faker' +import React from 'react' import * as common from 'test/specs/commonTests' +import ListItem from 'src/elements/List/ListItem' + describe('ListItem', () => { common.isConformant(ListItem) common.rendersChildren(ListItem) + + common.propKeyOnlyToClassName(ListItem, 'active') + common.propKeyOnlyToClassName(ListItem, 'disabled') + + describe('list', () => { + it('omitted when rendered as `li`', () => { + shallow() + .should.not.have.className('item') + }) + }) + + describe('value', () => { + it('adds data attribute by default', () => { + const value = faker.hacker.phrase() + + shallow() + .should.have.data('value', value) + }) + + it('adds attribute when rendered as `li`', () => { + const value = faker.hacker.phrase() + + shallow() + .should.have.attr('value', value) + }) + }) }) diff --git a/test/specs/elements/List/ListList-test.js b/test/specs/elements/List/ListList-test.js new file mode 100644 index 0000000000..a255abc38f --- /dev/null +++ b/test/specs/elements/List/ListList-test.js @@ -0,0 +1,21 @@ +import React from 'react' +import * as common from 'test/specs/commonTests' + +import ListList from 'src/elements/List/ListList' + +describe('ListList', () => { + common.isConformant(ListList) + common.rendersChildren(ListList) + + describe('list', () => { + it('omitted when rendered as `ol`', () => { + shallow() + .should.not.have.className('list') + }) + + it('omitted when rendered as `ul`', () => { + shallow() + .should.not.have.className('list') + }) + }) +})