UXUI-239 initial icon-list & icon-list-item

docs/examples/IconList.jsx

@@ -0,0 +1,9 @@
+var example = (
+  <UIToolkit.IconList>
+    <UIToolkit.IconListItem icon="plane">Suitable for all terminals Suitable for all terminals Suitable for all terminals Suitable for all terminals Suitable for all terminals Suitable for all terminals Suitable for all terminals Suitable for all terminals Suitable for all terminals Suitable for all terminals Suitable for all terminals </UIToolkit.IconListItem>
+    <UIToolkit.IconListItem icon="bus">Transfers run every 5 minutes</UIToolkit.IconListItem>
+    <UIToolkit.IconListItem icon="car">Car parked for you</UIToolkit.IconListItem>
+  </UIToolkit.IconList>
+);
+
+React.render(example, mountNode);

docs/src/Components.jsx

@@ -84,6 +84,13 @@ var Components = React.createClass({
           <CustomComponent codeText={fs.readFileSync(__dirname + '/../examples/ProductTile.jsx', 'utf8')} />
         </article>
 
+        <article id="lists">
+          <h3>Lists</h3>
+          <h4>Icon list</h4>
+          <p>An unordered list that uses font awesome for the bullets</p>
+          <CustomComponent codeText={fs.readFileSync(__dirname + '/../examples/IconList.jsx', 'utf8')} />
+        </article>
+
       </section>
     );
   }

docs/src/CustomComponent.jsx

@@ -21,7 +21,6 @@ var CodeMirrorEditor = React.createClass({
     this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
       mode: 'javascript',
       lineNumbers: false,
-      lineWrapping: true,
       matchBrackets: true,
       tabSize: 2,
       theme: 'solarized-light',

src/components/icon-list-item/__tests__/IconListItemComponent-test.js

@@ -0,0 +1,15 @@
+/** @jsx React.DOM */
+
+jest.dontMock('../code/views/IconListItemComponentView.jsx');
+
+var React = require('react/addons');
+var IconListItemComponent = require('../code/views/IconListItemComponentView.jsx');
+var TestUtils = React.addons.TestUtils;
+
+describe('IconListItemComponent', function() {
+
+  it('is an element', function() {
+    expect(TestUtils.isElement(<IconListItemComponent />)).toBeTruthy();
+  });
+
+});

src/components/icon-list-item/code/index.js

@@ -0,0 +1 @@
+module.exports = require('./views/IconListItemComponentView.jsx');

src/components/icon-list-item/code/less/_icon-list-item.less

@@ -0,0 +1,7 @@
+/*------------------------------------*\
+    # Icon list item
+\*------------------------------------*/
+
+.component-icon-list-item {
+
+}

src/components/icon-list-item/code/templates/IconListItemComponentTemplate.jsx

@@ -0,0 +1,10 @@
+var React = require('react');
+
+module.exports = function(props) {
+  return (
+    <li className="component-icon-list-item">
+      <i className={'fa fa-fw fa-' + props.icon} />
+      <span>{props.children}</span>
+    </li>
+  );
+};

src/components/icon-list-item/code/views/IconListItemComponentView.jsx

@@ -0,0 +1,7 @@
+var React = require('react');
+
+module.exports = React.createClass({
+  render: function() {
+    return require('../templates/IconListItemComponentTemplate.jsx')(this.props);
+  }
+});

src/components/icon-list-item/index.js

@@ -0,0 +1 @@
+module.exports = require('./code/index');

src/components/icon-list-item/scripts/build-dev.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+if [ -z "$VARIANT" ]; then VARIANT=''; fi
+if [ -z "$TEMPLATE_LANG" ]; then TEMPLATE_LANG='en'; fi
+
+echo "Building package for demo. Variant: '$VARIANT', language: '$TEMPLATE_LANG'."
+
+browserify -t [ redirectify --dir "$VARIANT" ] -t reactify dev/example.jsx -o dev/ui-component-icon-list-item.js

src/components/icon-list-item/scripts/build-dist.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+if [ -z "$VARIANT" ]; then VARIANT=''; fi
+if [ -z "$TEMPLATE_LANG" ]; then TEMPLATE_LANG='en'; fi
+
+echo "Building package for demo. Variant: '$VARIANT', language: '$TEMPLATE_LANG'."
+
+browserify -t [ redirectify --dir "$VARIANT" ] -t reactify index.js --standalone ui-component-icon-list-item > dist/ui-component-icon-list-item-standalone.js

src/components/icon-list/__tests__/IconListComponent-test.js

@@ -0,0 +1,15 @@
+/** @jsx React.DOM */
+
+jest.dontMock('../code/views/IconListComponentView.jsx');
+
+var React = require('react/addons');
+var IconListComponent = require('../code/views/IconListComponentView.jsx');
+var TestUtils = React.addons.TestUtils;
+
+describe('IconListComponent', function() {
+
+  it('is an element', function() {
+    expect(TestUtils.isElement(<IconListComponent />)).toBeTruthy();
+  });
+
+});

src/components/icon-list/code/index.js

@@ -0,0 +1 @@
+module.exports = require('./views/IconListComponentView.jsx');

src/components/icon-list/code/less/_icon-list.less

@@ -0,0 +1,9 @@
+/*------------------------------------*\
+    # Icon list
+\*------------------------------------*/
+
+.component-icon-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}

src/components/icon-list/code/templates/IconListComponentTemplate.jsx

@@ -0,0 +1,7 @@
+module.exports = function(props) {
+  return (
+    <ul className="component-icon-list">
+      {props.children}
+    </ul>
+  );
+};

src/components/icon-list/code/views/IconListComponentView.jsx

@@ -0,0 +1,7 @@
+var React = require('react');
+
+module.exports = React.createClass({
+  render: function() {
+    return require('../templates/IconListComponentTemplate.jsx')(this.props);
+  }
+});

src/components/icon-list/index.js

@@ -0,0 +1 @@
+module.exports = require('./code/index');

src/components/icon-list/scripts/build-dev.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+if [ -z "$VARIANT" ]; then VARIANT=''; fi
+if [ -z "$TEMPLATE_LANG" ]; then TEMPLATE_LANG='en'; fi
+
+echo "Building package for demo. Variant: '$VARIANT', language: '$TEMPLATE_LANG'."
+
+browserify -t [ redirectify --dir "$VARIANT" ] -t reactify dev/example.jsx -o dev/ui-component-icon-list.js

src/components/icon-list/scripts/build-dist.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+if [ -z "$VARIANT" ]; then VARIANT=''; fi
+if [ -z "$TEMPLATE_LANG" ]; then TEMPLATE_LANG='en'; fi
+
+echo "Building package for demo. Variant: '$VARIANT', language: '$TEMPLATE_LANG'."
+
+browserify -t [ redirectify --dir "$VARIANT" ] -t reactify index.js --standalone ui-component-icon-list > dist/ui-component-icon-list-standalone.js

src/less/toolkit.less

@@ -10,5 +10,7 @@
 @import "../components/image/code/less/_image";
 @import "../components/tile/code/less/_tile";
 @import "../components/product-tile/code/less/_product-tile";
+@import "../components/icon-list/code/less/_icon-list";
+@import "../components/icon-list-item/code/less/_icon-list-item";
 
 @import (inline) "../../node_modules/font-awesome/css/font-awesome.min.css";

src/ui-toolkit.js

@@ -8,5 +8,7 @@ UIToolkit.Reviews = require('./components/reviews');
 UIToolkit.ProductTile = require('./components/product-tile');
 UIToolkit.Tile = require('./components/tile');
 UIToolkit.Image = require('./components/image');
+UIToolkit.IconList = require('./components/icon-list');
+UIToolkit.IconListItem = require('./components/icon-list-item');
 
 module.exports = UIToolkit;