Icon Component updated to v1 API (#343)

* chore(gitignore): add MacOS and JetBrains files * feat(Icon): update to v1 API * test(Icon): add and update tests for v1 * docs(Icon): add and update docs for v1 * refactor(Icon): update className usages to name * docs(Icon): complete todos * refactor(DocumentTitle): move to ComponentDoc
Semantic-Org · Jul 19, 2016 · 2754a48 · 2754a48
1 parent 8fa2f28
commit 2754a48
Showing 64 changed files with 1,033 additions and 188 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,7 @@ coverage/
 dist/
 docs/build
 docs/app/docgenInfo.json
-dll/
+dll
+
+.DS_Store
+.idea/
diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js
@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import React, { PropTypes } from 'react'
+import DocumentTitle from 'react-document-title'
 
 import ComponentDescription from './ComponentDescription'
 import ComponentExamples from './ComponentExamples'
@@ -14,15 +15,17 @@ const ComponentDoc = ({ _meta }) => {
   const docgen = docgenInfo[docPath]
 
   return (
-    <div>
-      <ComponentDescription
-        _meta={_meta}
-        docgen={docgen}
-        docPath={docPath}
-      />
-      {docgen.props && <ComponentProps props={docgen.props} />}
-      <ComponentExamples name={_meta.name} />
-    </div>
+    <DocumentTitle title={`${_meta.name} | UI React`}>
+      <div>
+        <ComponentDescription
+          _meta={_meta}
+          docgen={docgen}
+          docPath={docPath}
+        />
+        {docgen.props && <ComponentProps props={docgen.props} />}
+        <ComponentExamples name={_meta.name} />
+      </div>
+    </DocumentTitle>
   )
 }
 

diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js
@@ -2,6 +2,9 @@ import React, { Component, createElement, PropTypes } from 'react'
 import { Grid, Header, Icon } from 'stardust'
 import Highlight from 'react-highlight'
 import { exampleContext } from 'docs/app/utils'
+import {
+  getUnhandledProps,
+} from 'src/utils/propUtils'
 
 /**
  * Renders a `component` and the raw `code` that produced it.
@@ -12,16 +15,15 @@ export default class ComponentExample extends Component {
     children: PropTypes.node,
     description: PropTypes.string,
     examplePath: PropTypes.string.isRequired,
+    exampleSrc: PropTypes.node,
     title: PropTypes.string,
   }
 
   constructor(props, context) {
     super(props, context)
     this.state = { showCode: false }
-    this.fileContents = require(`!raw!docs/app/Examples/${props.examplePath}`)
+    this.fileContents = props.exampleSrc || require(`!raw!docs/app/Examples/${props.examplePath}`)
     this.component = exampleContext(`./${props.examplePath}.js`).default
-    // 'elements/Button/Types/Button' => #Button-Types-Button
-    this.anchor = props.examplePath.split('/').slice(1).join('-')
   }
 
   toggleShowCode = () => {
@@ -43,9 +45,10 @@ export default class ComponentExample extends Component {
     }
 
     const children = <Grid.Column>{this.props.children}</Grid.Column>
+    const rest = getUnhandledProps(ComponentExample, this.props)
 
     return (
-      <Grid className='one column' style={{ marginBottom: '4em' }} id={this.anchor}>
+      <Grid className='one column' style={{ marginBottom: '4em' }}>
         <Grid.Column>
           <Grid>
             <Grid.Column width={12}>
@@ -55,13 +58,13 @@ export default class ComponentExample extends Component {
               <p>{this.props.description}</p>
             </Grid.Column>
             <Grid.Column width={4} className='right aligned'>
-              <Icon className='grey code link' onClick={this.toggleShowCode} style={codeIconStyle} />
+              <Icon name='code link' color='grey' onClick={this.toggleShowCode} style={codeIconStyle} />
             </Grid.Column>
           </Grid>
         </Grid.Column>
         {this.props.children && children}
         <Grid.Column>
-          {createElement(this.component)}
+          {createElement(this.component, rest)}
         </Grid.Column>
         {this.state.showCode && code}
       </Grid>

diff --git a/docs/app/Components/Root.js b/docs/app/Components/Root.js
@@ -2,7 +2,6 @@ import 'semantic-ui-css/semantic.css'
 import 'highlight.js/styles/github.css'
 import _ from 'lodash/fp'
 import React, { Component, PropTypes } from 'react'
-import DocumentTitle from 'react-document-title'
 
 import ComponentDoc from 'docs/app/Components/ComponentDoc/ComponentDoc'
 import PageNotFound from 'docs/app/Components/PageNotFound/PageNotFound'
@@ -25,9 +24,7 @@ export default class Root extends Component {
     }
 
     return (
-      <DocumentTitle title={`${component._meta.name} | UI React`}>
-        <ComponentDoc _meta={component._meta} />
-      </DocumentTitle>
+      <ComponentDoc _meta={component._meta} />
     )
   }
 }
diff --git a/docs/app/Components/Sidebar/Sidebar.js b/docs/app/Components/Sidebar/Sidebar.js
@@ -51,7 +51,7 @@ export default class Sidebar extends Component {
           <strong>UI-React Docs</strong>
         </div>
         <a className='item' href='https://github.com/TechnologyAdvice/stardust'>
-          <Icon className='github' /> GitHub
+          <Icon name='github' /> GitHub
         </a>
         <div className='item'>
           <Input
@@ -64,7 +64,7 @@ export default class Sidebar extends Component {
         </div>
         {_.map(this.renderItemsByType, typeOrder)}
         <a className='item' href='https://github.com/TechnologyAdvice/stardust/blob/master/CHANGELOG.md'>
-          <Icon className='file text outline' /> CHANGELOG
+          <Icon name='file text outline' /> CHANGELOG
         </a>
       </Menu>
     )

diff --git a/docs/app/Examples/elements/Button/Groups/ButtonIconButtonsExample.js b/docs/app/Examples/elements/Button/Groups/ButtonIconButtonsExample.js
@@ -6,13 +6,13 @@ export default class ButtonIconButtonsExample extends Component {
     return (
       <Buttons>
         <Button className='icon'>
-          <Icon className='save' />
+          <Icon name='save' />
         </Button>
         <Button className='icon'>
-          <Icon className='delete' />
+          <Icon name='delete' />
         </Button>
         <Button className='icon'>
-          <Icon className='edit' />
+          <Icon name='edit' />
         </Button>
       </Buttons>
     )

diff --git a/docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js b/docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js
@@ -7,7 +7,7 @@ export default class ButtonAnimatedExample extends Component {
       <Button className='animated'>
         <div className='visible content'>Next</div>
         <div className='hidden content'>
-          <Icon className='right arrow' />
+          <Icon name='right arrow' />
         </div>
       </Button>
     )

diff --git a/docs/app/Examples/elements/Button/Types/ButtonIconExample.js b/docs/app/Examples/elements/Button/Types/ButtonIconExample.js
@@ -5,7 +5,7 @@ export default class ButtonIconExample extends Component {
   render() {
     return (
       <Button className='icon'>
-        <Icon className='world' />
+        <Icon name='world' />
       </Button>
     )
   }

diff --git a/docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js b/docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js
@@ -6,7 +6,7 @@ export default class ButtonLabeledExample extends Component {
     return (
       <Button className='labeled'>
         <Button>
-          <Icon className='heart' /> Like
+          <Icon name='heart' /> Like
         </Button>
         {/* TODO: See issue #46 - button needs to render as a div */}
         <Label basic link>

diff --git a/docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js b/docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js
@@ -6,11 +6,11 @@ export default class ButtonLabeledIconExample extends Component {
     return (
       <div>
         <Button className='labeled icon'>
-          <Icon className='pause' />
+          <Icon name='pause' />
           Pause
         </Button>
         <Button className='right labeled icon'>
-          <Icon className='right arrow' />
+          <Icon name='right arrow' />
           Next
         </Button>
       </div>

diff --git a/docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js b/docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js
@@ -5,7 +5,7 @@ export default class ButtonCircularExample extends Component {
   render() {
     return (
       <Button className='circular icon'>
-        <Icon className='heart' />
+        <Icon name='heart' />
       </Button>
     )
   }

diff --git a/docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js b/docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js
@@ -6,31 +6,31 @@ export default class ButtonSocialExample extends Component {
     return (
       <div>
         <Button className='facebook'>
-          <Icon className='facebook' />
+          <Icon name='facebook' />
           Facebook
         </Button>
         <Button className='twitter'>
-          <Icon className='twitter' />
+          <Icon name='twitter' />
           Twitter
         </Button>
         <Button className='google plus'>
-          <Icon className='google plus' />
+          <Icon name='google plus' />
           Google Plus
         </Button>
         <Button className='vk'>
-          <Icon className='vk' />
+          <Icon name='vk' />
           VK
         </Button>
         <Button className='linkedin'>
-          <Icon className='linkedin' />
+          <Icon name='linkedin' />
           LinkedIn
         </Button>
         <Button className='instagram'>
-          <Icon className='instagram' />
+          <Icon name='instagram' />
           Instagram
         </Button>
         <Button className='youtube'>
-          <Icon className='youtube' />
+          <Icon name='youtube' />
           YouTube
         </Button>
       </div>

diff --git a/docs/app/Examples/elements/Header/Content/HeaderIconExample.js b/docs/app/Examples/elements/Header/Content/HeaderIconExample.js
@@ -3,7 +3,7 @@ import { Header, Icon } from 'stardust'
 
 export default class HeaderIconExample extends Component {
   render() {
-    const plug = <Icon className='plug' />
+    const plug = <Icon name='plug' />
     return (
       <Header.H2 icon={plug}>
         Is Your Electricity Truly Electrifying?

diff --git a/docs/app/Examples/elements/Header/Types/HeaderIconHeadersExample.js b/docs/app/Examples/elements/Header/Types/HeaderIconHeadersExample.js
@@ -3,7 +3,7 @@ import { Header, Icon } from 'stardust'
 
 export default class HeaderIconHeadersExample extends Component {
   render() {
-    const settings = <Icon className='settings' />
+    const settings = <Icon name='settings' />
     return (
       <Header.H2 className='icon' icon={settings} >
         Account Settings

diff --git a/docs/app/Examples/elements/Icon/Groups/IconCornerGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconCornerGroupExample.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+import { Icon } from 'stardust'
+
+export default class IconCornerGroupExample extends Component {
+  render() {
+    return (
+      <Icon.Group size='huge'>
+        <Icon name='puzzle' />
+        <Icon corner name='add' />
+      </Icon.Group>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Icon/Groups/IconIconGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconIconGroupExample.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+import { Icon } from 'stardust'
+
+export default class IconIconGroupExample extends Component {
+  render() {
+    return (
+      <Icon.Group size='huge'>
+        <Icon size='big' name='thin circle' />
+        <Icon name='user' />
+      </Icon.Group>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Icon/Groups/IconLoadingGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconLoadingGroupExample.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { Icon } from 'stardust'
+
+export default class IconLoadingGroupExample extends Component {
+  render() {
+    return (
+      <div>
+        <Icon.Group size='huge'>
+          <Icon size='big' color='red' name='dont' />
+          <Icon color='black' name='use' />
+        </Icon.Group>
+        <Icon.Group size='huge'>
+          <Icon loading size='big' name='sun' />
+          <Icon name='user' />
+        </Icon.Group>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Header, Icon } from 'stardust'
+
+export default class IconTwitterGroupExample extends Component {
+  render() {
+    return (
+      <Header.H2>
+        <Icon.Group size='large'>
+          <Icon name='twitter' />
+          <Icon corner name='add' />
+        </Icon.Group>
+        Add on Twitter
+      </Header.H2>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Icon/Groups/index.js b/docs/app/Examples/elements/Icon/Groups/index.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+export default class IconGroupsExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Groups'>
+        <ComponentExample
+          title='Icons'
+          description='Several icons can be used together as a group'
+          examplePath='elements/Icon/Groups/IconIconGroupExample'
+        />
+        <ComponentExample
+          examplePath='elements/Icon/Groups/IconLoadingGroupExample'
+        />
+        <ComponentExample
+          title='Corner Icon'
+          description='A group of icons can display a smaller corner icon'
+          examplePath='elements/Icon/Groups/IconCornerGroupExample'
+        />
+        <ComponentExample
+          examplePath='elements/Icon/Groups/IconTwitterGroupExample'
+        />
+      </ExampleSection>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Icon/IconExamples.js b/docs/app/Examples/elements/Icon/IconExamples.js
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconCategoryExample.js b/docs/app/Examples/elements/Icon/IconSet/IconCategoryExample.js
@@ -0,0 +1,24 @@
+import _ from 'lodash'
+import React, { PropTypes } from 'react'
+import { Grid, Icon } from 'stardust'
+
+const columns = (icons) => _.map(icons, icon => (
+  <Grid.Column key={icon} className='center aligned'>
+    <Icon name={icon} style={{ fontSize: '2em' }} />
+    <div>{_.startCase(icon)}</div>
+  </Grid.Column>
+))
+
+const IconCategoryExample = ({ category }) => (
+  <Grid className='doubling five column'>
+    {columns(category.icons)}
+  </Grid>
+)
+
+IconCategoryExample.propTypes = {
+  category: PropTypes.shape({
+    icons: PropTypes.array.isRequired,
+  }),
+}
+
+export default IconCategoryExample