diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 459cf42b9b..e669a34c77 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -484,6 +484,12 @@ A doc block should appear above each prop in `propTypes` to describe them: ```js Label.propTypes = { + /** An element type to render as (string or function). */ + as: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + /** A label can reduce its complexity. */ basic: PropTypes.bool, diff --git a/docs/app/Components/ComponentDoc/ComponentDescription.js b/docs/app/Components/ComponentDoc/ComponentDescription.js index 4d9b52cc41..b26fbbf3d9 100644 --- a/docs/app/Components/ComponentDoc/ComponentDescription.js +++ b/docs/app/Components/ComponentDoc/ComponentDescription.js @@ -97,7 +97,7 @@ export default class ComponentDescription extends Component { - {_meta.name} +
{_meta.name}
 diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js index f5cb2b23c5..8432a4376b 100644 --- a/docs/app/Components/ComponentDoc/ComponentDoc.js +++ b/docs/app/Components/ComponentDoc/ComponentDoc.js @@ -31,6 +31,12 @@ const ComponentDoc = ({ _meta }) => { } ComponentDoc.propTypes = { + /** An element type to render as (string or function). */ + as: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + _meta: PropTypes.object, } diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js index 7cc6f18f3d..d3f354a5b2 100644 --- a/docs/app/Components/ComponentDoc/ComponentExample.js +++ b/docs/app/Components/ComponentDoc/ComponentExample.js @@ -51,9 +51,11 @@ export default class ComponentExample extends Component { - {this.props.title && - {this.props.title} - } + {this.props.title && ( +
+ {this.props.title} +
+ )} {this.props.description &&

{this.props.description}

} diff --git a/docs/app/Components/ComponentDoc/ComponentExamples.js b/docs/app/Components/ComponentDoc/ComponentExamples.js index b4af5224b8..04ec020d56 100644 --- a/docs/app/Components/ComponentDoc/ComponentExamples.js +++ b/docs/app/Components/ComponentDoc/ComponentExamples.js @@ -41,7 +41,7 @@ export default class ComponentExamples extends Component { render() { return (
- Examples +
Examples
{this.renderExample() || this.renderMissingExamples()}
diff --git a/docs/app/Components/ComponentDoc/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps.js index 3aedbd1052..2489e80cce 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps.js +++ b/docs/app/Components/ComponentDoc/ComponentProps.js @@ -66,7 +66,7 @@ export default class ComponentProps extends Component { return (
- Props +
Props
diff --git a/docs/app/Components/ComponentDoc/ExampleSection.js b/docs/app/Components/ComponentDoc/ExampleSection.js index 2a7a34118d..89831f6b58 100644 --- a/docs/app/Components/ComponentDoc/ExampleSection.js +++ b/docs/app/Components/ComponentDoc/ExampleSection.js @@ -11,9 +11,9 @@ export default class ExampleSection extends Component { render() { return (
- +
{this.props.title} - +
{this.props.children}
) diff --git a/docs/app/Examples/elements/Container/Types/ContainerTextExample.js b/docs/app/Examples/elements/Container/Types/ContainerTextExample.js index c1050282fe..4018324fb1 100644 --- a/docs/app/Examples/elements/Container/Types/ContainerTextExample.js +++ b/docs/app/Examples/elements/Container/Types/ContainerTextExample.js @@ -7,7 +7,7 @@ export default class ContainerTextExample extends Component { render() { return ( - Header +
Header

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.

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.

 diff --git a/docs/app/Examples/elements/Container/Variations/ContainerFluidExample.js b/docs/app/Examples/elements/Container/Variations/ContainerFluidExample.js index 80a03f2f63..d8f1759a4b 100644 --- a/docs/app/Examples/elements/Container/Variations/ContainerFluidExample.js +++ b/docs/app/Examples/elements/Container/Variations/ContainerFluidExample.js @@ -8,7 +8,7 @@ export default class ContainerFluidExample extends Component { return (
- Dogs Roles with Humans +
Dogs Roles with Humans

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.

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.

 diff --git a/docs/app/Examples/elements/Header/Content/HeaderIconExample.js b/docs/app/Examples/elements/Header/Content/HeaderIconExample.js index 41f82077f5..ee16287c38 100644 --- a/docs/app/Examples/elements/Header/Content/HeaderIconExample.js +++ b/docs/app/Examples/elements/Header/Content/HeaderIconExample.js @@ -1,13 +1,10 @@ -import React, { Component } from 'react' -import { Header, Icon } from 'stardust' +import React from 'react' +import { Header } from 'stardust' -export default class HeaderIconExample extends Component { - render() { - const plug = - return ( - - Is Your Electricity Truly Electrifying? - - ) - } -} +const HeaderIconExample = () => ( +
+ Is Your Electricity Truly Electrifying? +
+) + +export default HeaderIconExample diff --git a/docs/app/Examples/elements/Header/Content/HeaderImageExample.js b/docs/app/Examples/elements/Header/Content/HeaderImageExample.js index 15c0575897..53b9e83e97 100644 --- a/docs/app/Examples/elements/Header/Content/HeaderImageExample.js +++ b/docs/app/Examples/elements/Header/Content/HeaderImageExample.js @@ -1,14 +1,13 @@ import faker from 'faker' -import React, { Component } from 'react' +import React from 'react' import { Header, Image } from 'stardust' -export default class HeaderImageExample extends Component { - render() { - const photo = - return ( - - Welcome to Our City! - - ) - } -} +const image = + +const HeaderImageExample = () => ( +
+ Welcome to Our City! +
+) + +export default HeaderImageExample diff --git a/docs/app/Examples/elements/Header/Content/HeaderSubheaderExample.js b/docs/app/Examples/elements/Header/Content/HeaderSubheaderExample.js index 3a3c1c001f..038aa1f9e6 100644 --- a/docs/app/Examples/elements/Header/Content/HeaderSubheaderExample.js +++ b/docs/app/Examples/elements/Header/Content/HeaderSubheaderExample.js @@ -1,15 +1,13 @@ -import React, { Component } from 'react' +import React from 'react' import { Header } from 'stardust' -export default class HeaderSubheaderExample extends Component { - render() { - return ( - - Account Settings - - Manage your account settings and set email preferences - - - ) - } -} +const HeaderSubheaderExample = () => ( +
+ Account Settings + + Manage your account settings and set email preferences + +
+) + +export default HeaderSubheaderExample diff --git a/docs/app/Examples/elements/Header/Content/index.js b/docs/app/Examples/elements/Header/Content/index.js index 7b8892a8d4..f6a2f955e7 100644 --- a/docs/app/Examples/elements/Header/Content/index.js +++ b/docs/app/Examples/elements/Header/Content/index.js @@ -1,27 +1,25 @@ -import React, { Component } from 'react' +import React from 'react' import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' -export default class HeaderContentExamples extends Component { - render() { - return ( - - - - - - ) - } -} +const HeaderContentExamples = () => ( + + + + + +) + +export default HeaderContentExamples diff --git a/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js b/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js index d579c2d540..df0308e9d7 100644 --- a/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js +++ b/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js @@ -1,12 +1,10 @@ -import React, { Component } from 'react' +import React from 'react' import { Header } from 'stardust' -export default class HeaderDisabledExample extends Component { - render() { - return ( - - Disabled Header - - ) - } -} +const HeaderDisabledExample = () => ( +
+ Disabled Header +
+) + +export default HeaderDisabledExample diff --git a/docs/app/Examples/elements/Header/States/index.js b/docs/app/Examples/elements/Header/States/index.js index 016eabcb27..d0945ce4d0 100644 --- a/docs/app/Examples/elements/Header/States/index.js +++ b/docs/app/Examples/elements/Header/States/index.js @@ -1,17 +1,15 @@ -import React, { Component } from 'react' +import React from 'react' import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' -export default class HeaderStatesExamples extends Component { - render() { - return ( - - - - ) - } -} +const HeaderStatesExamples = () => ( + + + +) + +export default HeaderStatesExamples diff --git a/docs/app/Examples/elements/Header/Types/HeaderContentHeadersExample.js b/docs/app/Examples/elements/Header/Types/HeaderContentHeadersExample.js index c2628932b1..9e0916aeea 100644 --- a/docs/app/Examples/elements/Header/Types/HeaderContentHeadersExample.js +++ b/docs/app/Examples/elements/Header/Types/HeaderContentHeadersExample.js @@ -1,26 +1,24 @@ -import React, { Component } from 'react' +import React from 'react' import { Header } from 'stardust' -export default class HeaderContentHeadersExample extends Component { - render() { - return ( -
-
- Huge Header -
-
- Large Header -
-
- Medium Header -
-
- Small Header -
-
- Tiny Header -
-
- ) - } -} +const HeaderContentHeadersExample = () => ( +
+
+ Huge Header +
+
+ Large Header +
+
+ Medium Header +
+
+ Small Header +
+
+ Tiny Header +
+
+) + +export default HeaderContentHeadersExample diff --git a/docs/app/Examples/elements/Header/Types/HeaderIconHeadersExample.js b/docs/app/Examples/elements/Header/Types/HeaderIconHeadersExample.js index 32461bdecf..c6529cf892 100644 --- a/docs/app/Examples/elements/Header/Types/HeaderIconHeadersExample.js +++ b/docs/app/Examples/elements/Header/Types/HeaderIconHeadersExample.js @@ -1,16 +1,13 @@ -import React, { Component } from 'react' -import { Header, Icon } from 'stardust' +import React from 'react' +import { Header } from 'stardust' -export default class HeaderIconHeadersExample extends Component { - render() { - const settings = - return ( - - Account Settings - - Manage your account settings and set e-mail preferences. - - - ) - } -} +const HeaderIconHeadersExample = () => ( +
+ Account Settings + + Manage your account settings and set e-mail preferences. + +
+) + +export default HeaderIconHeadersExample diff --git a/docs/app/Examples/elements/Header/Types/HeaderPageHeadersExample.js b/docs/app/Examples/elements/Header/Types/HeaderPageHeadersExample.js index 81cba177ad..75311c8038 100644 --- a/docs/app/Examples/elements/Header/Types/HeaderPageHeadersExample.js +++ b/docs/app/Examples/elements/Header/Types/HeaderPageHeadersExample.js @@ -1,29 +1,27 @@ -import React, { Component } from 'react' +import React from 'react' import { Header } from 'stardust' -export default class HeaderPageHeadersExamples extends Component { - render() { - return ( -
- - First Header - - - Second Header - - - Third Header - - - Fourth Header - - - Fifth Header - - - Sixth Header - -
- ) - } -} +const HeaderPageHeadersExamples = () => ( +
+
+ First Header +
+
+ Second Header +
+
+ Third Header +
+
+ Fourth Header +
+
+ Fifth Header +
+
+ Sixth Header +
+
+) + +export default HeaderPageHeadersExamples diff --git a/docs/app/Examples/elements/Header/Types/HeaderSubHeadersExample.js b/docs/app/Examples/elements/Header/Types/HeaderSubHeadersExample.js index ebe64b13d2..f3cb5a51fc 100644 --- a/docs/app/Examples/elements/Header/Types/HeaderSubHeadersExample.js +++ b/docs/app/Examples/elements/Header/Types/HeaderSubHeadersExample.js @@ -1,15 +1,11 @@ -import React, { Component } from 'react' +import React from 'react' import { Header } from 'stardust' -export default class HeaderSubHeadersExamples extends Component { - render() { - return ( - - Price - - $10.99 - - - ) - } -} +const HeaderSubHeadersExample = () => ( +
+
Price
+ $10.99 +
+) + +export default HeaderSubHeadersExample diff --git a/docs/app/Examples/elements/Header/Types/index.js b/docs/app/Examples/elements/Header/Types/index.js index 965a5ac7aa..89f6d69971 100644 --- a/docs/app/Examples/elements/Header/Types/index.js +++ b/docs/app/Examples/elements/Header/Types/index.js @@ -1,41 +1,39 @@ -import React, { Component } from 'react' +import React 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 HeaderTypesExamples extends Component { - render() { - return ( - - - - Page headings are sized using rem and are not affected by surrounding content size. - - - - - Content headings are sized with em and are based on the font-size of their container. - - - - - - ) - } -} +const HeaderTypesExamples = () => ( + + + + Page headings are sized using rem and are not affected by surrounding content size. + + + + + Content headings are sized with em and are based on the font-size of their container. + + + + + +) + +export default HeaderTypesExamples diff --git a/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js b/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js index 0941d72fdb..6eb07a13c1 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js @@ -1,19 +1,17 @@ -import React, { Component } from 'react' +import React from 'react' import { Header, Segment } from 'stardust' -export default class HeaderAttachedExample extends Component { - render() { - return ( -
- - Attached Header - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - -
- ) - } -} +const HeaderAttachedExample = () => ( +
+
+ Attached Header +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. + +
+) + +export default HeaderAttachedExample diff --git a/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js b/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js index a7ce7f9178..f41202a2d7 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js @@ -1,12 +1,10 @@ -import React, { Component } from 'react' +import React from 'react' import { Header } from 'stardust' -export default class HeaderBlockExample extends Component { - render() { - return ( - - Block Header - - ) - } -} +const HeaderBlockExample = () => ( +
+ Block Header +
+) + +export default HeaderBlockExample diff --git a/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js b/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js index 049928287f..eabc5cb443 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js @@ -1,23 +1,21 @@ -import React, { Component } from 'react' +import React from 'react' import { Header } from 'stardust' -export default class HeaderColoredExample extends Component { - render() { - return ( -
- Red - Orange - Yellow - Olive - Green - Teal - Blue - Purple - Violet - Pink - Brown - Grey -
- ) - } -} +const HeaderColoredExample = () => ( +
+
Red
+
Orange
+
Yellow
+
Olive
+
Green
+
Teal
+
Blue
+
Purple
+
Violet
+
Pink
+
Brown
+
Grey
+
+) + +export default HeaderColoredExample diff --git a/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js b/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js index 0a755b0502..5c9caf2515 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js @@ -1,12 +1,10 @@ -import React, { Component } from 'react' +import React from 'react' import { Header } from 'stardust' -export default class HeaderDividingExample extends Component { - render() { - return ( - - Dividing Header - - ) - } -} +const HeaderDividingExample = () => ( +
+ Dividing Header +
+) + +export default HeaderDividingExample diff --git a/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js b/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js index 148a935054..9d27978c82 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js @@ -1,17 +1,15 @@ -import React, { Component } from 'react' +import React from 'react' import { Header, Segment } from 'stardust' -export default class HeaderFloatingExample extends Component { - render() { - return ( - - - Float Right - - - Float Left - - - ) - } -} +const HeaderFloatingExample = () => ( + +
+ Float Right +
+
+ Float Left +
+ +) + +export default HeaderFloatingExample diff --git a/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js b/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js index 5e752724c2..404e345a72 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js @@ -1,23 +1,21 @@ -import React, { Component } from 'react' +import React from 'react' import { Header, Segment } from 'stardust' -export default class HeaderInvertedExample extends Component { - render() { - return ( - - Red - Orange - Yellow - Olive - Green - Teal - Blue - Purple - Violet - Pink - Brown - Grey - - ) - } -} +const HeaderInvertedExample = () => ( + +
Red
+
Orange
+
Yellow
+
Olive
+
Green
+
Teal
+
Blue
+
Purple
+
Violet
+
Pink
+
Brown
+
Grey
+ +) + +export default HeaderInvertedExample diff --git a/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js b/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js index 8164c1ef33..2d42e68463 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js @@ -1,23 +1,21 @@ -import React, { Component } from 'react' +import React from 'react' import { Header, Segment } from 'stardust' -export default class HeaderTextAlignmentExample extends Component { - render() { - return ( - - - Float Right - - - Float Left - - - This text takes up the full width of the container - - - Centered - - - ) - } -} +const HeaderTextAlignmentExample = () => ( + +
+ Float Right +
+
+ Float Left +
+
+ This text takes up the full width of the container +
+
+ Centered +
+ +) + +export default HeaderTextAlignmentExample diff --git a/docs/app/Examples/elements/Header/Variations/index.js b/docs/app/Examples/elements/Header/Variations/index.js index 93b1bccdc4..b356edc1a1 100644 --- a/docs/app/Examples/elements/Header/Variations/index.js +++ b/docs/app/Examples/elements/Header/Variations/index.js @@ -1,52 +1,50 @@ -import React, { Component } from 'react' +import React 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 HeaderVariationsExamples extends Component { - render() { - return ( - - - - - - - - - - Inverted headers use modified light versions of the site color scheme - - - - ) - } -} +const HeaderVariationsExamples = () => ( + + + + + + + + + + Inverted headers use modified light versions of the site color scheme + + + +) + +export default HeaderVariationsExamples diff --git a/docs/app/Examples/elements/Header/index.js b/docs/app/Examples/elements/Header/index.js index 620a732f4a..1b27e0423b 100644 --- a/docs/app/Examples/elements/Header/index.js +++ b/docs/app/Examples/elements/Header/index.js @@ -1,25 +1,16 @@ -import React, { Component } from 'react' +import React from 'react' import Types from './Types' import Content from './Content' import States from './States' import Variations from './Variations' -import { Message } from 'stardust' -export default class HeaderExamples extends Component { - render() { - return ( -
- - Semantic UI uses both <div> and <h*> tags - for headers. In Stardust, the <Header> component renders a - <div>. While subcomponents, <Header.H*>, - render an <h*>. See the examples below for further clarfication. - - - - - -
- ) - } -} +const HeaderExamples = () => ( +
+ + + + +
+) + +export default HeaderExamples diff --git a/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js index 8ae83615bf..d9216a4905 100644 --- a/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js +++ b/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js @@ -4,13 +4,13 @@ import { Header, Icon } from 'stardust' export default class IconTwitterGroupExample extends Component { render() { return ( - +
Add on Twitter - +
) } } diff --git a/docs/app/Examples/elements/Icon/IconSet/IconCategoryExample.js b/docs/app/Examples/elements/Icon/IconSet/IconCategoryExample.js index 5f0a90b9b9..19561c5316 100644 --- a/docs/app/Examples/elements/Icon/IconSet/IconCategoryExample.js +++ b/docs/app/Examples/elements/Icon/IconSet/IconCategoryExample.js @@ -16,6 +16,12 @@ const IconCategoryExample = ({ category }) => ( ) IconCategoryExample.propTypes = { + /** An element type to render as (string or function). */ + as: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + category: PropTypes.shape({ icons: PropTypes.array.isRequired, }), diff --git a/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js b/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js index 9badd8baa7..28d8aa36f9 100644 --- a/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js +++ b/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js @@ -13,6 +13,12 @@ const Wrapper = ({ children }) => ( ) Wrapper.propTypes = { + /** An element type to render as (string or function). */ + as: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + children: PropTypes.node, } diff --git a/docs/app/Examples/elements/Segment/Variations/SegmentAttachedComplexExample.js b/docs/app/Examples/elements/Segment/Variations/SegmentAttachedComplexExample.js index bc3793ab27..20b12982b6 100644 --- a/docs/app/Examples/elements/Segment/Variations/SegmentAttachedComplexExample.js +++ b/docs/app/Examples/elements/Segment/Variations/SegmentAttachedComplexExample.js @@ -5,21 +5,21 @@ export default class SegmentAttachedComplexExample extends Component { render() { return (
- +
Dogs - +
Dogs are one type of animal - +
Cats - +
Cats are thought of as being related to dogs, but only humans think this. - +
Lions - +
Humans don't think of lions as being like cats, but they are. diff --git a/docs/app/Examples/elements/Segment/Variations/SegmentCircularExample.js b/docs/app/Examples/elements/Segment/Variations/SegmentCircularExample.js index 546b1e2c5b..2e2a71077d 100644 --- a/docs/app/Examples/elements/Segment/Variations/SegmentCircularExample.js +++ b/docs/app/Examples/elements/Segment/Variations/SegmentCircularExample.js @@ -6,20 +6,20 @@ export default class SegmentCircularExample extends Component { return (
- +
Sale! $10.99 - +
- +
Buy Now $10.99 - +
) diff --git a/docs/app/Examples/views/Feed/Variations/SizeSmall.js b/docs/app/Examples/views/Feed/Variations/SizeSmall.js index 9e4a606465..e5f5616797 100644 --- a/docs/app/Examples/views/Feed/Variations/SizeSmall.js +++ b/docs/app/Examples/views/Feed/Variations/SizeSmall.js @@ -6,7 +6,7 @@ const { Content, Event, Summary } = Feed const SizeSmall = () => { return ( - Followers Activity +
Followers Activity
diff --git a/docs/app/Views/Introduction.js b/docs/app/Views/Introduction.js index 3e47f93de1..c80cc7cd5e 100644 --- a/docs/app/Views/Introduction.js +++ b/docs/app/Views/Introduction.js @@ -94,13 +94,31 @@ const MessageSubComponentsHTML = `
We're fetching that content for you.
` +const HeaderAugmentationJSX = `
+ Learn More +
` +const HeaderAugmentationHTML = `

+ Learn More +

` +const MenuItemLinkAugmentationJSX = `import { Link } from 'react-router' + + + + Home + +` +const MenuItemLinkAugmentationHTML = `
+ + Learn More + +
` const Comparison = ({ jsx, html }) => ( - + {jsx} @@ -120,6 +138,12 @@ const Comparison = ({ jsx, html }) => ( ) Comparison.propTypes = { + /** An element type to render as (string or function). */ + as: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + jsx: PropTypes.string, html: PropTypes.string, } @@ -128,30 +152,34 @@ const Introduction = () => ( - +
Semantic-UI-React {pkg.description} - +
- Install +
Install
$ npm install {pkg.name}
 jQuery Free - Declarative Components + Declarative API + Augmentation Shorthand Props Sub Components Auto Controlled State + {/* ---------------------------------------- + * jQuery Free + * -------------------------------------- */} - jQuery Free +
jQuery Free

jQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representation of the real DOM). @@ -163,21 +191,49 @@ const Introduction = () => (

+ {/* ---------------------------------------- + * Declarative API + * -------------------------------------- */} - Declarative Components - Declarative APIs provide for robust features and prop validation. +
Declarative API
+

+ Declarative APIs provide for robust features and prop validation. +

+ {/* ---------------------------------------- + * Augmentation + * -------------------------------------- */} + +
Augmentation
+

+ Control the rendered HTML tag, or render one component as another component. + Extra props are passed to the component you are rending as. +

+ +

+ Augmentation is powerful. You can compose component features and props without adding extra nested components. + This is essential for working with MenuLinks and react-router. +

+ + + + + + {/* ---------------------------------------- + * Shorthand Props + * -------------------------------------- */} - Shorthand Props +
Shorthand Props

Shorthand props generate markup for you, making many use cases a breeze. + All object props are spread on the child components.

- Child Object Arrays +
Child Object Arrays

Components with repeating children accept arrays of plain objects. @@ -187,14 +243,14 @@ const Introduction = () => (

- {'icon={...}'} +
{'icon={...}'}

The icon prop is standard for many components. It can accept an Icon name, an Icon props object, or an {''} instance.

- {'image={...}'} +
{'image={...}'}

The image prop is standard for many components. It can accept an image src, an Image props object, or an {''} instance. @@ -202,8 +258,11 @@ const Introduction = () => ( + {/* ---------------------------------------- + * Sub Components + * -------------------------------------- */} - Sub Components +

Sub Components

Sub components give you complete access to the markup. This is essential for flexibility in customizing components. @@ -211,8 +270,11 @@ const Introduction = () => ( + {/* ---------------------------------------- + * Auto Controlled State + * -------------------------------------- */} - Auto Controlled State +

Auto Controlled State

React has the concept of diff --git a/docs/app/index.ejs b/docs/app/index.ejs index f0fd754cf2..7f8f21e611 100644 --- a/docs/app/index.ejs +++ b/docs/app/index.ejs @@ -52,7 +52,14 @@ opacity: 1; } - .code-example pre { + /* Doc site styles */ + + #introduction-page p { + font-size: 1.125em; + margin: 1.5em 0; + } + + pre { margin: 0; } @@ -61,7 +68,7 @@ padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; - font-size: 90%; + font-size: 85%; background-color: rgba(0, 0, 0, 0.04); border-radius: 3px; } diff --git a/package.json b/package.json index 10f8a5ca04..bef47e32cd 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "raw-loader": "^0.5.1", "react": "^15.3.1", "react-addons-test-utils": "^15.3.1", - "react-docgen": "^2.2.0", + "react-docgen": "^2.10.0", "react-document-title": "^2.0.2", "react-dom": "^15.3.1", "react-highlight": "^0.8.0", diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js index 72e6a861e6..d33effa327 100644 --- a/src/addons/Confirm/Confirm.js +++ b/src/addons/Confirm/Confirm.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react' import { Button } from '../../elements' import { Modal } from '../../modules' -import { getUnhandledProps, META } from '../../lib' +import { getElementType, getUnhandledProps, META } from '../../lib' /** * A Confirm modal gives the user a choice to confirm or cancel an action @@ -11,16 +11,17 @@ import { getUnhandledProps, META } from '../../lib' function Confirm(props) { const { active, cancelButton, confirmButton, header, content, onConfirm, onCancel } = props const rest = getUnhandledProps(Confirm, props) + const ElementType = getElementType(Confirm, props) return ( - + {header && {header}} {content && {content}} - + ) } @@ -30,6 +31,12 @@ Confirm._meta = { } Confirm.propTypes = { + /** An element type to render as (string or function). */ + as: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + /** Whether or not the modal is visible */ active: PropTypes.bool, @@ -53,6 +60,7 @@ Confirm.propTypes = { } Confirm.defaultProps = { + as: Modal, cancelButton: 'Cancel', confirmButton: 'OK', content: 'Are you sure?', diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js index dfe78c82a2..d737fe038a 100644 --- a/src/addons/Radio/Radio.js +++ b/src/addons/Radio/Radio.js @@ -1,5 +1,6 @@ -import React from 'react' -import { META } from '../../lib' +import React, { PropTypes } from 'react' + +import { META, getElementType } from '../../lib' import { Checkbox } from '../../modules' /** @@ -8,7 +9,8 @@ import { Checkbox } from '../../modules' * @see Checkbox */ function Radio(props) { - return + const ElementType = getElementType(Radio, props) + return } Radio._meta = { @@ -16,4 +18,16 @@ Radio._meta = { type: META.TYPES.ADDON, } +Radio.propTypes = { + /** An element type to render as (string or function). */ + as: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), +} + +Radio.defaultProps = { + as: Checkbox, +} + export default Radio diff --git a/src/addons/Select/Select.js b/src/addons/Select/Select.js index 37e168afbc..33e65d0fb9 100644 --- a/src/addons/Select/Select.js +++ b/src/addons/Select/Select.js @@ -1,6 +1,6 @@ -import React from 'react' +import React, { PropTypes } from 'react' -import { META } from '../../lib' +import { getElementType, getUnhandledProps, META } from '../../lib' import { Dropdown } from '../../modules' /** @@ -8,7 +8,9 @@ import { Dropdown } from '../../modules' * @see Dropdown */ function Select(props) { - return + const ElementType = getElementType(Select, props) + const rest = getUnhandledProps(Select, props) + return } Select._meta = { @@ -16,4 +18,16 @@ Select._meta = { type: META.TYPES.ADDON, } +Select.propTypes = { + /** An element type to render as (string or function). */ + as: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), +} + +Select.defaultProps = { + as: Dropdown, +} + export default Select diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js index f2adf1298e..6d780272f9 100644 --- a/src/addons/TextArea/TextArea.js +++ b/src/addons/TextArea/TextArea.js @@ -1,5 +1,5 @@ -import React from 'react' -import { META } from '../../lib' +import React, { PropTypes } from 'react' +import { getElementType, getUnhandledProps, META } from '../../lib' /** * A simple