which let us position something immediately after the value
+ */
+ readonly: PT.bool,
+
+ /**
+ * Show help icon next to the label with the tooltip defined by this prop
+ */
+ labelHelpTooltip: PT.node,
+
+ /**
+ * Show help icon next to the value with the tooltip defined by this prop
+ * This only has any effect if `readonly` is set to `true`
+ */
+ readonlyValueTooltip: PT.node,
+
+ /**
+ * Show error message without any condition
+ */
+ forceErrorMessage: PT.string,
+
+ /**
+ * country list
+ */
+ listCountry: PT.array,
+
+ /**
+ * event when change phone
+ */
+ onChangeCountry: PT.func,
+
+ /**
+ * should show check mark icon when valid input
+ */
+ showCheckMark: PT.bool
+
+}
+
+export default hoc(PhoneInput)
diff --git a/components/Formsy/PhoneInput.scss b/components/Formsy/PhoneInput.scss
new file mode 100644
index 000000000..5cba08053
--- /dev/null
+++ b/components/Formsy/PhoneInput.scss
@@ -0,0 +1,82 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.readonly-wrapper {
+ :global(input.tc-file-field__inputs) {
+ display: none;
+ }
+}
+
+.readonly-value {
+ color: $tc-gray-60;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ margin-bottom: 2 * $base-unit;
+ padding: 0 2 * $base-unit;
+ width: 100%;
+}
+
+
+:global {
+ .phone-input-container {
+ position: relative;
+
+ .tc-file-field__inputs {
+ padding-right: 66px;
+ }
+
+ .input-container {
+ position: relative;
+ }
+
+ .dropdown-wrap {
+ position: absolute;
+ bottom: 1px;
+ right: 1px;
+ height: 28px;
+ background: #D7D3D0;
+ width: 60px;
+ border-radius: 0 3px 3px 0;
+
+ .dropdown-wrap {
+ top: 0;
+
+ .dropdown-menu-list {
+ max-height: 300px;
+ overflow-y: scroll;
+
+ li {
+ white-space: nowrap;
+
+ &.selected {
+ background-color: lightgray;
+ }
+ }
+ }
+
+ .dropdown-menu-header {
+ color: #FFFFFF;
+ font-size: 13px;
+ font-weight: 400;
+ text-align: center;
+ height: 100%;
+ width: 100%;
+
+ .arrow {
+ transform: scaleY(-1);
+ margin-top: -5px;
+ }
+ }
+
+ .Dropdown {
+ width: auto;
+ margin-left: -150px;
+ margin-top: 30px;
+ color: black;
+ text-align: center;
+ }
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/components/Formsy/RadioGroup.jsx b/components/Formsy/RadioGroup.jsx
new file mode 100644
index 000000000..197046e48
--- /dev/null
+++ b/components/Formsy/RadioGroup.jsx
@@ -0,0 +1,88 @@
+import React, { Component, PropTypes } from 'react'
+import { HOC as hoc } from 'formsy-react'
+import cn from 'classnames'
+import { find } from "lodash";
+import { numberWithCommas } from './format'
+
+class RadioGroup extends Component {
+
+ constructor(props) {
+ super(props)
+ this.changeValue = this.changeValue.bind(this)
+ }
+
+ changeValue(e) {
+ const value = e.target.value
+ this.props.setValue(value)
+ this.props.onChange(this.props.name, value)
+ }
+
+ getSelectedOption() {
+ const {options = [], getValue} = this.props;
+ const value = getValue()
+ return find(options, o => value === o.value)
+ }
+
+ render() {
+ const { label, name, wrapperClass, options } = this.props
+ const hasError = !this.props.isPristine() && !this.props.isValid()
+ const disabled = this.props.isFormDisabled() || this.props.disabled
+ const errorMessage = this.props.getErrorMessage() || this.props.validationError
+ const selectedOption = this.getSelectedOption()
+ const hasPrice = find(options, o => o.quoteUp)
+
+ const renderOption = (radio, key) => {
+ const relativePrice = (selectedOption, radio) => {
+ const price = (radio.quoteUp || 0) - (selectedOption.quoteUp || 0)
+ return (price < 0 ? '-' : '+') + ' $' + numberWithCommas(Math.abs(price))
+ }
+ const checked = (selectedOption && selectedOption.value === radio.value)
+ const disabled = this.props.isFormDisabled() || radio.disabled || this.props.disabled
+ const rClass = cn('radio', { disabled, selected: checked })
+ const id = name+'-opt-'+key
+ const setRef = (c) => this['element-' + key] = c
+ return (
+
+ )
+ }
+}
+
+
+RadioGroup.PropTypes = {
+ options: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
+RadioGroup.defaultProps = {
+ onChange: () => {}
+}
+
+export default hoc(RadioGroup)
diff --git a/components/Formsy/RadioGroupExample.jsx b/components/Formsy/RadioGroupExample.jsx
new file mode 100644
index 000000000..5f8eba349
--- /dev/null
+++ b/components/Formsy/RadioGroupExample.jsx
@@ -0,0 +1,90 @@
+import React from 'react'
+import TiledRadioGroup from './TiledRadioGroup'
+import Formsy from 'formsy-react'
+import './RadioGroupExample.scss'
+
+const opts = [
+ {
+ title: 'ASAP',
+ value: 'opt ASAP',
+ desc: null
+ },
+ {
+ title: '1 - 2 months',
+ value: 'opt 1 - 2 months',
+ desc: null
+ },
+ {
+ title: '2 - 3 months',
+ value: 'opt 2 - 3 months',
+ desc: null
+ }
+]
+
+
+class RadioGroupExample extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ radioGroup1value: ['opt 2 - 3 months'],
+ radioGroup2value: ['opt ASAP']
+ }
+
+ this.onChange = this.onChange.bind(this)
+ }
+
+ onChange(name, value) {
+ if (name === 'radioGroup1') {
+ this.setState({radioGroup1value: value})
+ }
+ if (name === 'radioGroup2') {
+ this.setState({radioGroup2value: value})
+ }
+ }
+
+ render() {
+ return (
+
+
+ )
+ }
+}
+
+export default RadioGroupExample
diff --git a/components/Formsy/RadioGroupExample.scss b/components/Formsy/RadioGroupExample.scss
new file mode 100644
index 000000000..4a20b8495
--- /dev/null
+++ b/components/Formsy/RadioGroupExample.scss
@@ -0,0 +1,33 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+:global {
+ .radio-group-container {
+ .single-action-radio-group {
+ margin-bottom: 50px;
+ }
+ .checkbox-title {
+ font-size: 20px;
+ font-weight: 200;
+ margin-bottom: 20px;
+ }
+ .test {
+ display: flex;
+ flex-direction: row;
+ }
+ .tiled-group-item {
+ margin-right: 30px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .check-mark {
+ background: blue;
+ border-radius: 100%;
+ width: 20px;
+ height: 20px;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ }
+ }
+}
diff --git a/components/Formsy/SliderRadioGroup.jsx b/components/Formsy/SliderRadioGroup.jsx
new file mode 100644
index 000000000..941d9ad17
--- /dev/null
+++ b/components/Formsy/SliderRadioGroup.jsx
@@ -0,0 +1,66 @@
+'use strict'
+
+import React, { Component, PropTypes } from 'react'
+import Slider from 'rc-slider'
+import 'rc-slider/assets/index.css'
+import cn from 'classnames'
+import _ from 'lodash'
+import { HOC as hoc } from 'formsy-react'
+
+class SliderRadioGroup extends Component {
+ constructor(props) {
+ super(props)
+ this.onChange = this.onChange.bind(this)
+ }
+
+ onChange(value) {
+ const {name, options} = this.props
+ const newValue = options[value].value
+ this.props.setValue(newValue)
+ this.props.onChange(name, newValue)
+ }
+
+ noOp() {}
+
+ getIndexFromValue(val) {
+ return _.findIndex(this.props.options, (t) => t.value === val)
+ }
+
+ render() {
+ const { options, min, max, step} = this.props
+ const value = this.props.getValue()
+ const valueIdx = this.getIndexFromValue(value)
+ const marks = {}
+ for(let i=0; i < options.length; i++) {
+ marks[i] = options[i].title
+ }
+ return (
+
+ )
+ }
+}
+
+SliderRadioGroup.propTypes = {
+ options: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
+ min: PropTypes.number.isRequired,
+ max: PropTypes.number.isRequired,
+ step: PropTypes.number.isRequired
+}
+SliderRadioGroup.defaultProps = {
+ onChange: () => {}
+}
+export default hoc(SliderRadioGroup)
\ No newline at end of file
diff --git a/components/Formsy/TextInput.jsx b/components/Formsy/TextInput.jsx
new file mode 100644
index 000000000..25efe8765
--- /dev/null
+++ b/components/Formsy/TextInput.jsx
@@ -0,0 +1,133 @@
+import React, { Component } from 'react'
+import PT from 'prop-types'
+import { HOC as hoc } from 'formsy-react'
+import classNames from 'classnames'
+
+import HelpIcon from '../HelpIcon/HelpIcon'
+import IconUICheckSimple from '../Icons/IconUICheckSimple'
+
+import styles from './TextInput.scss'
+
+class TextInput extends Component {
+
+ constructor(props) {
+ super(props)
+ this.changeValue = this.changeValue.bind(this)
+ this.callValidator= this.callValidator.bind(this)
+ this.isValidInput= this.isValidInput.bind(this)
+ this.previousValue = null
+ }
+
+ componentDidUpdate() {
+ setTimeout(() => {
+ this.callValidator()
+ }, 100)
+ }
+
+ changeValue(e) {
+ const value = e.target.value
+ this.props.setValue(value)
+ this.props.onChange(this.props.name, value)
+ this.isUpdatedValue = true
+ }
+
+ callValidator() {
+ const { validator } = this.props
+ const hasError = !this.props.isPristine() && !this.props.isValid()
+ const value = this.props.getValue()
+ if (!hasError && value && value !== this.previousValue && this.isUpdatedValue) {
+ validator(value)
+ this.previousValue = value
+ }
+ }
+
+ isValidInput() {
+ const value = this.props.getValue()
+ const hasError = !this.props.isPristine() && !this.props.isValid()
+ return (!this.props.forceErrorMessage && !!value && !hasError)
+ }
+
+ render() {
+ const { label, name, type, minValue, maxValue, placeholder, wrapperClass, maxLength, theme,
+ labelHelpTooltip, readonly, readonlyValueTooltip, showCheckMark } = this.props
+ const hasError = !this.props.isPristine() && !this.props.isValid()
+ const disabled = this.props.isFormDisabled() || this.props.disabled
+ const wrapperClasses = classNames(wrapperClass, theme, { [styles['readonly-wrapper']]: readonly })
+ const classes = classNames('tc-file-field__inputs', {error: hasError}, {empty: this.props.getValue() === ''})
+ const errorMessage = this.props.getErrorMessage() || this.props.validationError
+ const value = this.props.getValue()
+ return (
+
+ )
+ }
+}
+
+TextInput.defaultProps = {
+ onChange: () => {},
+ forceErrorMessage: null,
+ validator: (() => {}),
+ showCheckMark: false
+}
+
+TextInput.propTypes = {
+ /**
+ * The difference from `disabled` is that instead of showing disabled input
+ * we show value using
which let us position something immediately after the value
+ */
+ readonly: PT.bool,
+
+ /**
+ * Show help icon next to the label with the tooltip defined by this prop
+ */
+ labelHelpTooltip: PT.node,
+
+ /**
+ * Show help icon next to the value with the tooltip defined by this prop
+ * This only has any effect if `readonly` is set to `true`
+ */
+ readonlyValueTooltip: PT.node,
+
+ /**
+ * Show error message without any condition
+ */
+ forceErrorMessage: PT.string,
+
+ /**
+ * validator functionn from outside
+ */
+ validator: PT.func,
+
+ /**
+ * should show check mark icon when valid input
+ */
+ showCheckMark: PT.bool
+}
+
+export default hoc(TextInput)
diff --git a/components/Formsy/TextInput.scss b/components/Formsy/TextInput.scss
new file mode 100644
index 000000000..a00a7b7e8
--- /dev/null
+++ b/components/Formsy/TextInput.scss
@@ -0,0 +1,17 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.readonly-wrapper {
+ :global(input.tc-file-field__inputs) {
+ display: none;
+ }
+}
+
+.readonly-value {
+ color: $tc-gray-60;
+ display: block;
+ // height: 40px;
+ // line-height: 40px;
+ // margin-bottom: 2 * $base-unit;
+ // padding: 0 2 * $base-unit;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/components/Formsy/Textarea.jsx b/components/Formsy/Textarea.jsx
new file mode 100644
index 000000000..3df33e735
--- /dev/null
+++ b/components/Formsy/Textarea.jsx
@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import { HOC as hoc } from 'formsy-react'
+import classNames from 'classnames'
+import AutoresizeTextarea from 'react-textarea-autosize'
+
+class Textarea extends Component {
+
+ constructor(props) {
+ super(props)
+ this.changeValue = this.changeValue.bind(this)
+ }
+
+ changeValue(e) {
+ const value = e.target.value
+ this.props.setValue(value)
+ this.props.onChange(this.props.name, value)
+ }
+
+ heightChanged(height, instance) {
+ if(!instance.state || !instance.state._sizeInitialized) {
+ setTimeout(() => {
+ instance._resizeComponent()
+ })
+ instance.setState({
+ _sizeInitialized: true
+ })
+ }
+ }
+
+ render() {
+ const { label, name, rows, cols, placeholder, wrapperClass} = this.props
+ const hasError = !this.props.isPristine() && !this.props.isValid()
+ const classes = classNames('tc-textarea', {error: hasError}, {empty: this.props.getValue() === ''})
+ const disabled = this.props.isFormDisabled() || this.props.disabled
+ const errorMessage = this.props.getErrorMessage() || this.props.validationError
+
+ return (
+
+
+ {
+ this.props.autoResize ?
+
:
+
+ }
+ { hasError ? (
{errorMessage}
) : null}
+
+
+ )
+ }
+}
+Textarea.defaultProps = {
+ onChange: () => {},
+ rows: 1,
+ cols: 0
+}
+export default hoc(Textarea)
diff --git a/components/Formsy/TiledCheckboxGroup.jsx b/components/Formsy/TiledCheckboxGroup.jsx
new file mode 100644
index 000000000..81d33e54b
--- /dev/null
+++ b/components/Formsy/TiledCheckboxGroup.jsx
@@ -0,0 +1,139 @@
+'use strict'
+import React, { PropTypes, Component } from 'react'
+import classNames from 'classnames'
+import Tooltip from '../Tooltip/Tooltip'
+import IconUICheckSimple from '../Icons/IconUICheckSimple'
+import { HOC as hoc } from 'formsy-react'
+
+class TiledCheckboxGroup extends Component {
+ constructor(props) {
+ super(props)
+ this.onChange = this.onChange.bind(this)
+ this.getCheckMarkIconActive = this.getCheckMarkIconActive.bind(this)
+ }
+
+ onChange(value) {
+ const curValue = this.props.getValue() || []
+ const index = curValue.indexOf(value)
+ let newValue = [...curValue]
+ if (index > -1) {
+ newValue.splice(index, 1)
+ } else {
+ newValue.push(value)
+ }
+ this.props.setValue(newValue)
+ this.props.onChange(this.props.name, newValue)
+ }
+
+ getCheckMarkIconActive() {
+ return (this.props.checkMarkActiveIcon ? this.props.checkMarkActiveIcon : (
+
+
+ ))
+ }
+
+ render() {
+ const { wrapperClass, options, theme, tabable } = this.props
+ const curValue = this.props.getValue() || []
+ const hasError = !this.props.isPristine() && !this.props.isValid()
+ const disabled = this.props.isFormDisabled() || this.props.disabled
+ const errorMessage = this.props.getErrorMessage() || this.props.validationError
+
+ const renderOption = (opt, idx) => {
+ const checked = curValue.indexOf(opt.value) > -1
+ const itemClassnames = classNames('tiled-group-item', theme, {
+ active: checked
+ }, {
+ disabled: opt.disabled
+ })
+ const handleClick = () => this.onChange(opt.value)
+ const handleFocus = (e) => {
+ e.target.parentNode.classList.add('focused')
+ }
+ const handleBlur = (e) => {
+ e.target.parentNode.classList.remove('focused')
+ }
+ const Icon = opt.icon
+ const setRef = (c) => this['element-' + idx] = c
+ const renderTile = () => (
+
+ {
+ !!tabable &&
+
+ }
+ {
+ this.props.showCheckMarkBeforeTitle
+ && (checked
+ ? this.getCheckMarkIconActive()
+ : this.props.checkMarkUnActiveIcon)
+ }
+ { opt.icon && }
+ {opt.title}
+ {opt.desc}
+ {
+ !this.props.showCheckMarkBeforeTitle
+ && (checked
+ ? this.getCheckMarkIconActive()
+ : this.props.checkMarkUnActiveIcon)
+ }
+
+ )
+ return (
+
+ {
+ opt.disabled && opt.errorMessage ?
+
+
+ {renderTile()}
+
+
+ :
+ renderTile()
+ }
+
+ )
+ }
+
+ return (
+
+
+ {this.props.label && (
+
)}
+ {options.map(renderOption)}
+ { hasError ? (
{errorMessage}
) : null}
+
+ )
+ }
+}
+TiledCheckboxGroup.propTypes = {
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ desc: PropTypes.string
+ // icon: PropTypes.
+ }).isRequired
+ ).isRequired,
+ checkMarkActiveIcon: PropTypes.node,
+ checkMarkUnActiveIcon: PropTypes.node,
+ showCheckMarkBeforeTitle: PropTypes.bool
+}
+
+TiledCheckboxGroup.defaultProps = {
+ onChange: () => {},
+ showCheckMarkBeforeTitle: false
+}
+
+export default hoc(TiledCheckboxGroup)
diff --git a/components/Formsy/TiledCheckboxInput.jsx b/components/Formsy/TiledCheckboxInput.jsx
new file mode 100644
index 000000000..7b4e10915
--- /dev/null
+++ b/components/Formsy/TiledCheckboxInput.jsx
@@ -0,0 +1,58 @@
+'use strict'
+import React, { PropTypes, Component } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { HOC as hoc } from 'formsy-react'
+
+class TiledCheckbox extends Component {
+ constructor(props) {
+ super(props)
+ this.onChange = this.onChange.bind(this)
+ }
+
+ onChange(value) {
+ const newValue = _.xor(this.props.getValue(), [value])
+ this.props.setValue(newValue)
+ this.props.onChange(this.props.name, newValue)
+ }
+
+ render() {
+ const { wrapperClass, options } = this.props
+ const hasError = !this.props.isPristine() && !this.props.isValid()
+ const disabled = this.props.isFormDisabled() || this.props.disabled
+ const errorMessage = this.props.getErrorMessage() || this.props.validationError
+ const curValue = this.props.getValue()
+
+ const renderOption = (opt, idx) => {
+ // adding classes eg. "phone active"
+ const itemClassnames = classNames('tiled-group-item', {
+ active: _.indexOf(curValue, opt.value) > -1
+ })
+ const Icon = opt.icon
+ const handleClick = () => this.onChange(opt.value)
+ return (
+
+ { opt.icon && }
+ {opt.title}
+ {opt.desc}
+
+ )
+ }
+
+ return (
+
+ {options.map(renderOption)}
+ { hasError ? (
{errorMessage}
) : null}
+
+ )
+ }
+}
+TiledCheckbox.propTypes = {
+ options: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired
+}
+
+TiledCheckbox.defaultProps = {
+ onChange: () => {}
+}
+
+export default hoc(TiledCheckbox)
diff --git a/components/Formsy/TiledRadioGroup.jsx b/components/Formsy/TiledRadioGroup.jsx
new file mode 100644
index 000000000..9e4d4d5d4
--- /dev/null
+++ b/components/Formsy/TiledRadioGroup.jsx
@@ -0,0 +1,147 @@
+'use strict'
+import React, { PropTypes, Component } from 'react'
+import classNames from 'classnames'
+import Tooltip from '../Tooltip/Tooltip'
+import IconUICheckSimple from '../Icons/IconUICheckSimple'
+import { HOC as hoc } from 'formsy-react'
+
+class TiledRadioGroup extends Component {
+ constructor(props) {
+ super(props)
+ props.multipleOptions?(
+ this.state = {
+ curValue: []
+ }
+ ):(
+ this.state = {
+ curValue: []
+ }
+ )
+ this.onChange = this.onChange.bind(this)
+ this.getCheckMarkIconActive = this.getCheckMarkIconActive.bind(this)
+ this.state.curValue = (this.props.getValue())
+ }
+
+ onChange(value) {
+ const index = this.state.curValue.indexOf(value)
+ if (this.props.multipleOptions) {
+ if (index > -1) {
+ this.state.curValue.splice(index, 1)
+ } else {
+ this.state.curValue.push(value)
+ }
+ } else {
+ this.state.curValue = value
+ }
+ this.props.setValue(value)
+ this.props.onChange(this.props.name, this.state.curValue)
+ }
+
+ getCheckMarkIconActive() {
+ return (this.props.checkMarkActiveIcon ? this.props.checkMarkActiveIcon : (
+
+
+ ))
+ }
+
+ render() {
+ const { wrapperClass, options, theme, tabable } = this.props
+ const hasError = !this.props.isPristine() && !this.props.isValid()
+ const disabled = this.props.isFormDisabled() || this.props.disabled
+ const errorMessage = this.props.getErrorMessage() || this.props.validationError
+
+ const renderOption = (opt, idx) => {
+ const itemClassnames = classNames('tiled-group-item', theme, {
+ active: this.state.curValue.indexOf(opt.value) > -1
+ }, {
+ disabled: opt.disabled
+ })
+ const handleClick = () => this.onChange(opt.value)
+ const handleFocus = (e) => {
+ e.target.parentNode.classList.add('focused')
+ }
+ const handleBlur = (e) => {
+ e.target.parentNode.classList.remove('focused')
+ }
+ const Icon = opt.icon
+ const renderTile = () => (
+
+ {
+ !!tabable &&
+
+ }
+ {
+ this.props.showCheckMarkBeforeTitle
+ && ((this.state.curValue.indexOf(opt.value) > -1)
+ ? this.getCheckMarkIconActive()
+ : this.props.checkMarkUnActiveIcon)
+ }
+ { opt.icon && }
+ {opt.title}
+ {opt.desc}
+ {
+ !this.props.showCheckMarkBeforeTitle
+ && ((this.state.curValue.indexOf(opt.value) > -1)
+ ? this.getCheckMarkIconActive()
+ : this.props.checkMarkUnActiveIcon)
+ }
+
+ )
+ return (
+
+ {
+ opt.disabled ?
+
+
+ {renderTile()}
+
+
+ :
+ renderTile()
+ }
+
+ )
+ }
+
+ return (
+
+
+ {this.props.label && (
+
)}
+ {options.map(renderOption)}
+ { hasError ? (
{errorMessage}
) : null}
+
+ )
+ }
+}
+TiledRadioGroup.propTypes = {
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ desc: PropTypes.string
+ // icon: PropTypes.
+ }).isRequired
+ ).isRequired,
+ multipleOptions: PropTypes.bool,
+ checkMarkActiveIcon: PropTypes.node,
+ checkMarkUnActiveIcon: PropTypes.node,
+ showCheckMarkBeforeTitle: PropTypes.bool
+}
+
+TiledRadioGroup.defaultProps = {
+ onChange: () => {},
+ multipleOptions: false,
+ showCheckMarkBeforeTitle: false
+}
+
+export default hoc(TiledRadioGroup)
diff --git a/components/Formsy/format.js b/components/Formsy/format.js
new file mode 100644
index 000000000..c01d355d6
--- /dev/null
+++ b/components/Formsy/format.js
@@ -0,0 +1,12 @@
+/**
+ * Helper methods to format values
+ */
+
+/**
+ * Fomats number, separating every 3 digits with comma
+ *
+ * @param {Number} number
+ */
+export function numberWithCommas(number) {
+ return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
diff --git a/components/Formsy/images/check-white.svg b/components/Formsy/images/check-white.svg
new file mode 100644
index 000000000..d8c3c6d48
--- /dev/null
+++ b/components/Formsy/images/check-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/Formsy/index.js b/components/Formsy/index.js
new file mode 100644
index 000000000..d8b5b5786
--- /dev/null
+++ b/components/Formsy/index.js
@@ -0,0 +1,46 @@
+import _ from 'lodash'
+import Formsy from 'formsy-react'
+
+import TextInput from './TextInput'
+import Textarea from './Textarea'
+import Checkbox from './Checkbox'
+import RadioGroup from './RadioGroup'
+import CheckboxGroup from './CheckboxGroup'
+import SliderRadioGroup from './SliderRadioGroup'
+import TiledRadioGroup from './TiledRadioGroup'
+import TiledCheckboxInput from './TiledCheckboxInput'
+import TiledCheckboxGroup from './TiledCheckboxGroup'
+
+require('./FormFields.scss')
+
+const RELAXED_URL_REGEX = /^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,15})+(\:[0-9]{2,5})?(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/
+
+const VALID_NAME_REGEX = /.*\s+.+/i
+
+// validations
+Formsy.addValidationRule('isRequired', (values, value, array) => { // eslint-disable-line no-unused-vars
+ return value && ( _.isArray(value) ? value.length > 0 : value.trim().length > 0) ? true : false // eslint-disable-line no-unneeded-ternary
+})
+
+Formsy.addValidationRule('isRelaxedUrl', (values, value, array) => { // eslint-disable-line no-unused-vars
+ return !value || RELAXED_URL_REGEX.test(value) ? true : false // eslint-disable-line no-unneeded-ternary
+})
+
+Formsy.addValidationRule('isValidName', (values, value, array) => { // eslint-disable-line no-unused-vars
+ return value && VALID_NAME_REGEX.test(value.trim()) ? true : false // eslint-disable-line no-unneeded-ternary
+})
+
+export default {
+ Formsy,
+ Fields: {
+ TextInput,
+ Textarea,
+ RadioGroup,
+ Checkbox,
+ CheckboxGroup,
+ SliderRadioGroup,
+ TiledRadioGroup,
+ TiledCheckboxInput,
+ TiledCheckboxGroup
+ }
+}
diff --git a/components/FullHeightContainer/FullHeightContainer.jsx b/components/FullHeightContainer/FullHeightContainer.jsx
new file mode 100644
index 000000000..4689777c1
--- /dev/null
+++ b/components/FullHeightContainer/FullHeightContainer.jsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import cn from 'classnames'
+
+require('./FullHeightContainer.scss')
+
+class FullHeightContainer extends React.Component {
+
+ constructor(props) {
+ super(props)
+ this.state = { heights : {} }
+ }
+
+ componentDidMount() {
+ let page = this.refs.fullHeightContainer
+ const offset = this.props.offset || 0
+ while(page && page.nodeName !== '#document') {
+ // backs up the previous height, if any, set on the node
+ page.setAttribute('fhc-prev-height', page.style.height)
+ page.style.height = 'calc(100vh - ' + offset + 'px)'
+ page = page.parentNode
+ }
+ }
+
+ componentWillUnmount() {
+ let page = this.refs.fullHeightContainer
+ while(page && page.nodeName !== '#document') {
+ // restores the previous height, if any, set on the node
+ page.style.height = page.getAttribute('fhc-prev-height')
+ page.removeAttribute('fhc-prev-height')
+ page = page.parentNode
+ }
+ }
+
+ render() {
+ const containerClasses = cn('FullHeightContainer', {
+ [`${this.props.className}`] : true
+ })
+ return (
+
+ { this.props.children }
+
+ )
+ }
+}
+
+export default FullHeightContainer
diff --git a/components/FullHeightContainer/FullHeightContainer.scss b/components/FullHeightContainer/FullHeightContainer.scss
new file mode 100644
index 000000000..9e47e84a9
--- /dev/null
+++ b/components/FullHeightContainer/FullHeightContainer.scss
@@ -0,0 +1,3 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+
\ No newline at end of file
diff --git a/components/HelpIcon/HelpIcon.jsx b/components/HelpIcon/HelpIcon.jsx
new file mode 100644
index 000000000..172f0500e
--- /dev/null
+++ b/components/HelpIcon/HelpIcon.jsx
@@ -0,0 +1,40 @@
+/**
+ * Help icon with tooltip
+ */
+import React from 'react'
+import _ from 'lodash'
+import PT from 'prop-types'
+import cn from 'classnames'
+
+import HelpIconSvg from '../Icons/round-e-help.svg'
+import Tooltip from '../Tooltip/Tooltip'
+
+import styles from './HelpIcon.scss'
+
+const HELP_TOOLTIP_SHOW_DELAY = 300
+
+const HelpIcon = ({
+ className,
+ showTooltipDelay,
+ tooltip
+}) => {
+ const delay = !_.isNumber(showTooltipDelay) ? showTooltipDelay : HELP_TOOLTIP_SHOW_DELAY
+
+ return (
+
+
+ {tooltip}
+
+ )
+}
+
+HelpIcon.propTypes = {
+ className: PT.string,
+ showTooltipDelay: PT.number,
+ tooltip: PT.node
+}
+
+export default HelpIcon
\ No newline at end of file
diff --git a/components/HelpIcon/HelpIcon.scss b/components/HelpIcon/HelpIcon.scss
new file mode 100644
index 000000000..0eb45a69b
--- /dev/null
+++ b/components/HelpIcon/HelpIcon.scss
@@ -0,0 +1,16 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.label-help-icon {
+ display: inline-block;
+ line-height: normal;
+ margin-left: $base-unit;
+ position: relative;
+ top: 3px;
+ text-transform: none;
+
+ svg {
+ g {
+ fill: $tc-gray-50;
+ }
+ }
+}
\ No newline at end of file
diff --git a/components/Icons/CloseIcon.jsx b/components/Icons/CloseIcon.jsx
new file mode 100644
index 000000000..022d5d603
--- /dev/null
+++ b/components/Icons/CloseIcon.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const CloseIcon = ({ width = '14px', height = '14px' }) => {
+ return (
+
+ )
+}
+
+export default CloseIcon
diff --git a/components/Icons/ConnectLogo.jsx b/components/Icons/ConnectLogo.jsx
new file mode 100644
index 000000000..de817bdcd
--- /dev/null
+++ b/components/Icons/ConnectLogo.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+
+const ConnectLogo = ({ width, height }) => {
+ return (
+
+ )
+}
+
+export default ConnectLogo
diff --git a/components/Icons/ConnectLogoBeta.jsx b/components/Icons/ConnectLogoBeta.jsx
new file mode 100644
index 000000000..4aaf8dad8
--- /dev/null
+++ b/components/Icons/ConnectLogoBeta.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+const ConnectLogoBeta = ({ width, height }) => {
+ return (
+
+ )
+}
+
+export default ConnectLogoBeta
diff --git a/components/Icons/ConnectLogoWhite.jsx b/components/Icons/ConnectLogoWhite.jsx
new file mode 100644
index 000000000..b5afdcd18
--- /dev/null
+++ b/components/Icons/ConnectLogoWhite.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const ConnectLogoWhite = ({ width, height, fill, wrapperClass, title }) => {
+ return (
+
+ )
+}
+
+export default ConnectLogoWhite
diff --git a/components/Icons/EditIcon.jsx b/components/Icons/EditIcon.jsx
new file mode 100644
index 000000000..bdf06972c
--- /dev/null
+++ b/components/Icons/EditIcon.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const EditIcon = ({ width = '16px', height = '16px' }) => {
+ return (
+
+ )
+}
+
+export default EditIcon
diff --git a/components/Icons/FacebookIcon.jsx b/components/Icons/FacebookIcon.jsx
deleted file mode 100644
index 54a735d19..000000000
--- a/components/Icons/FacebookIcon.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-const FacebookIcon = ({ width, height, fill }) => {
- const f = (fill || '#3B5998')
- return (
-
- )
-}
-
-export default FacebookIcon
diff --git a/components/Icons/GPlusIcon.jsx b/components/Icons/GPlusIcon.jsx
deleted file mode 100644
index 837cdf692..000000000
--- a/components/Icons/GPlusIcon.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-const GPlusIcon = ({ width, height }) => {
- return (
-
- )
-}
-
-export default GPlusIcon
diff --git a/components/Icons/HamburgerIcon.jsx b/components/Icons/HamburgerIcon.jsx
deleted file mode 100644
index 5a5daeda3..000000000
--- a/components/Icons/HamburgerIcon.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-
-const HamburgerIcon = ({ width, height, stroke }) => {
- const s = (stroke || '#A3A3AE')
- return (
-
- )
-}
-
-export default HamburgerIcon
diff --git a/components/Icons/IconArrowLogOut.jsx b/components/Icons/IconArrowLogOut.jsx
new file mode 100644
index 000000000..18af438fd
--- /dev/null
+++ b/components/Icons/IconArrowLogOut.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconArrowLogOut = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowLogOut.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowLogOut
\ No newline at end of file
diff --git a/components/Icons/IconArrowMinimalDown.jsx b/components/Icons/IconArrowMinimalDown.jsx
new file mode 100644
index 000000000..67ec091dc
--- /dev/null
+++ b/components/Icons/IconArrowMinimalDown.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconArrowMinimalDown = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowMinimalDown.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowMinimalDown
\ No newline at end of file
diff --git a/components/Icons/IconArrowMinimalLeft.jsx b/components/Icons/IconArrowMinimalLeft.jsx
new file mode 100644
index 000000000..d7f6ac73f
--- /dev/null
+++ b/components/Icons/IconArrowMinimalLeft.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconArrowMinimalLeft = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowMinimalLeft.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowMinimalLeft
\ No newline at end of file
diff --git a/components/Icons/IconArrowMinimalRight.jsx b/components/Icons/IconArrowMinimalRight.jsx
new file mode 100644
index 000000000..451d223a3
--- /dev/null
+++ b/components/Icons/IconArrowMinimalRight.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconArrowMinimalRight = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowMinimalRight.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowMinimalRight
\ No newline at end of file
diff --git a/components/Icons/IconArrowMinimalUp.jsx b/components/Icons/IconArrowMinimalUp.jsx
new file mode 100644
index 000000000..119d0f4fe
--- /dev/null
+++ b/components/Icons/IconArrowMinimalUp.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const IconArrowMinimalUp = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowMinimalUp.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowMinimalUp
\ No newline at end of file
diff --git a/components/Icons/IconArrowPriorityHigh.jsx b/components/Icons/IconArrowPriorityHigh.jsx
new file mode 100644
index 000000000..37de8ae34
--- /dev/null
+++ b/components/Icons/IconArrowPriorityHigh.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const IconArrowPriorityHigh = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowPriorityHigh.propTypes = {
+ fill : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowPriorityHigh
\ No newline at end of file
diff --git a/components/Icons/IconArrowPriorityLow.jsx b/components/Icons/IconArrowPriorityLow.jsx
new file mode 100644
index 000000000..4836f1f71
--- /dev/null
+++ b/components/Icons/IconArrowPriorityLow.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const IconArrowPriorityLow = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowPriorityLow.propTypes = {
+ fill : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowPriorityLow
\ No newline at end of file
diff --git a/components/Icons/IconArrowSelect.jsx b/components/Icons/IconArrowSelect.jsx
new file mode 100644
index 000000000..60410d713
--- /dev/null
+++ b/components/Icons/IconArrowSelect.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconArrowSelect = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowSelect.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowSelect
\ No newline at end of file
diff --git a/components/Icons/IconArrowShareIcon.jsx b/components/Icons/IconArrowShareIcon.jsx
new file mode 100644
index 000000000..0cf34434c
--- /dev/null
+++ b/components/Icons/IconArrowShareIcon.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconArrowShareIcon = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowShareIcon.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowShareIcon
\ No newline at end of file
diff --git a/components/Icons/IconArrowTailDown.jsx b/components/Icons/IconArrowTailDown.jsx
new file mode 100644
index 000000000..a97f0d764
--- /dev/null
+++ b/components/Icons/IconArrowTailDown.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconArrowTailDown = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowTailDown.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowTailDown
\ No newline at end of file
diff --git a/components/Icons/IconArrowTailLeft.jsx b/components/Icons/IconArrowTailLeft.jsx
new file mode 100644
index 000000000..c6d4a64f5
--- /dev/null
+++ b/components/Icons/IconArrowTailLeft.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconArrolTailLeft = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrolTailLeft.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrolTailLeft
\ No newline at end of file
diff --git a/components/Icons/IconArrowTailRight.jsx b/components/Icons/IconArrowTailRight.jsx
new file mode 100644
index 000000000..caa5a29c5
--- /dev/null
+++ b/components/Icons/IconArrowTailRight.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconArrowTailRight = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowTailRight.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowTailRight
\ No newline at end of file
diff --git a/components/Icons/IconArrowTailUp.jsx b/components/Icons/IconArrowTailUp.jsx
new file mode 100644
index 000000000..0ef6669bd
--- /dev/null
+++ b/components/Icons/IconArrowTailUp.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconArrowTailUp = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconArrowTailUp.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconArrowTailUp
\ No newline at end of file
diff --git a/components/Icons/IconDesignCode.jsx b/components/Icons/IconDesignCode.jsx
new file mode 100644
index 000000000..c309b501a
--- /dev/null
+++ b/components/Icons/IconDesignCode.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconDesignCode = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconDesignCode.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconDesignCode
\ No newline at end of file
diff --git a/components/Icons/IconFilesSingleFoldedContent.jsx b/components/Icons/IconFilesSingleFoldedContent.jsx
new file mode 100644
index 000000000..e68c8d6e2
--- /dev/null
+++ b/components/Icons/IconFilesSingleFoldedContent.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconFileSingleFoldedContent = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconFileSingleFoldedContent.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconFileSingleFoldedContent
\ No newline at end of file
diff --git a/components/Icons/IconLeave.jsx b/components/Icons/IconLeave.jsx
new file mode 100644
index 000000000..b4c7d8188
--- /dev/null
+++ b/components/Icons/IconLeave.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const IconLeave = ({ width = '16px', height = '16px' }) => {
+ return (
+
+ )
+}
+
+export default IconLeave
diff --git a/components/Icons/IconMan.jsx b/components/Icons/IconMan.jsx
new file mode 100644
index 000000000..1caaed09d
--- /dev/null
+++ b/components/Icons/IconMan.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const IconMan = ({ fill, wrapperClass }) => {
+ return (
+
+ )
+}
+
+export default IconMan
diff --git a/components/Icons/IconMediaImage.jsx b/components/Icons/IconMediaImage.jsx
new file mode 100644
index 000000000..e81d2eacc
--- /dev/null
+++ b/components/Icons/IconMediaImage.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconName = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconName.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconName
\ No newline at end of file
diff --git a/components/Icons/IconTcCarretDown.jsx b/components/Icons/IconTcCarretDown.jsx
new file mode 100644
index 000000000..4e382594d
--- /dev/null
+++ b/components/Icons/IconTcCarretDown.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconCarretDown = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '6'
+ const width = props.width || '10'
+
+ return (
+
+ )
+}
+
+IconCarretDown.propTypes = {
+ wrapperClass : React.PropTypes.string,
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconCarretDown
\ No newline at end of file
diff --git a/components/Icons/IconTcCarretUp.jsx b/components/Icons/IconTcCarretUp.jsx
new file mode 100644
index 000000000..6dc3d8baf
--- /dev/null
+++ b/components/Icons/IconTcCarretUp.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconCarretUp = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '6'
+ const width = props.width || '10'
+
+ return (
+
+ )
+}
+
+IconCarretUp.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconCarretUp
\ No newline at end of file
diff --git a/components/Icons/IconTcMenuBold.jsx b/components/Icons/IconTcMenuBold.jsx
new file mode 100644
index 000000000..69397edf5
--- /dev/null
+++ b/components/Icons/IconTcMenuBold.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+const IconTcMenuBold = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconTcMenuBold.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcMenuBold
+
+
diff --git a/components/Icons/IconTcSpecIconTypeColorHome.jsx b/components/Icons/IconTcSpecIconTypeColorHome.jsx
new file mode 100644
index 000000000..5dbf96c9d
--- /dev/null
+++ b/components/Icons/IconTcSpecIconTypeColorHome.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconTcSpecIconTypeColorHome = (props) => {
+ const height = props.height || '46'
+ const width = props.width || '44'
+
+ return (
+
+ )
+}
+
+IconTcSpecIconTypeColorHome.propTypes = {
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcSpecIconTypeColorHome
\ No newline at end of file
diff --git a/components/Icons/IconTcSpecIconTypeGlyphHome.jsx b/components/Icons/IconTcSpecIconTypeGlyphHome.jsx
new file mode 100644
index 000000000..6767f926d
--- /dev/null
+++ b/components/Icons/IconTcSpecIconTypeGlyphHome.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+const IconTcSpecIconTypeGlyphHome = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '48'
+ const width = props.width || '48'
+
+ return (
+
+ )
+}
+
+IconTcSpecIconTypeGlyphHome.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcSpecIconTypeGlyphHome
\ No newline at end of file
diff --git a/components/Icons/IconTcSpecIconTypeOutlineHome.jsx b/components/Icons/IconTcSpecIconTypeOutlineHome.jsx
new file mode 100644
index 000000000..4ecb1f2e5
--- /dev/null
+++ b/components/Icons/IconTcSpecIconTypeOutlineHome.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconTcSpecIconTypeOutlineHome = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '48'
+ const width = props.width || '48'
+
+ return (
+
+ )
+}
+
+IconTcSpecIconTypeOutlineHome.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcSpecIconTypeOutlineHome
\ No newline at end of file
diff --git a/components/Icons/IconTcSpecTypeSansSerif.jsx b/components/Icons/IconTcSpecTypeSansSerif.jsx
new file mode 100644
index 000000000..16cd0ab1a
--- /dev/null
+++ b/components/Icons/IconTcSpecTypeSansSerif.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTcSpecTypeSansSerif = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '64'
+ const width = props.width || '64'
+
+ return (
+
+ )
+}
+
+IconTcSpecTypeSansSerif.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcSpecTypeSansSerif
\ No newline at end of file
diff --git a/components/Icons/IconTcSpecTypeSerif.jsx b/components/Icons/IconTcSpecTypeSerif.jsx
new file mode 100644
index 000000000..f57e0e652
--- /dev/null
+++ b/components/Icons/IconTcSpecTypeSerif.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTcSpecTypeSerif = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '64'
+ const width = props.width || '64'
+
+ return (
+
+ )
+}
+
+IconTcSpecTypeSerif.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcSpecTypeSerif
\ No newline at end of file
diff --git a/components/Icons/IconTcTextBold.jsx b/components/Icons/IconTcTextBold.jsx
new file mode 100644
index 000000000..084616b6a
--- /dev/null
+++ b/components/Icons/IconTcTextBold.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTcTextBold = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconTcTextBold.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcTextBold
\ No newline at end of file
diff --git a/components/Icons/IconTcTextItalic.jsx b/components/Icons/IconTcTextItalic.jsx
new file mode 100644
index 000000000..0669ddbe0
--- /dev/null
+++ b/components/Icons/IconTcTextItalic.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTcTextItalic = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconTcTextItalic.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcTextItalic
\ No newline at end of file
diff --git a/components/Icons/IconTcTextUnderline.jsx b/components/Icons/IconTcTextUnderline.jsx
new file mode 100644
index 000000000..86e951757
--- /dev/null
+++ b/components/Icons/IconTcTextUnderline.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTcTextUnderline = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconTcTextUnderline.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTcTextUnderline
\ No newline at end of file
diff --git a/components/Icons/IconTechOutlineDesktop.jsx b/components/Icons/IconTechOutlineDesktop.jsx
new file mode 100644
index 000000000..ac203c6e2
--- /dev/null
+++ b/components/Icons/IconTechOutlineDesktop.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTechOutlineDesktop = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '48'
+ const width = props.width || '48'
+
+ return (
+
+ )
+}
+
+IconTechOutlineDesktop.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTechOutlineDesktop
\ No newline at end of file
diff --git a/components/Icons/IconTechOutlineMobile.jsx b/components/Icons/IconTechOutlineMobile.jsx
new file mode 100644
index 000000000..cabacc979
--- /dev/null
+++ b/components/Icons/IconTechOutlineMobile.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTechOutlineMobile = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '48'
+ const width = props.width || '48'
+
+ return (
+
+ )
+}
+
+IconTechOutlineMobile.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTechOutlineMobile
\ No newline at end of file
diff --git a/components/Icons/IconTechOutlineTablet.jsx b/components/Icons/IconTechOutlineTablet.jsx
new file mode 100644
index 000000000..e73ae59e4
--- /dev/null
+++ b/components/Icons/IconTechOutlineTablet.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTechOutlineTablet = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '48'
+ const width = props.width || '48'
+
+ return (
+
+ )
+}
+
+IconTechOutlineTablet.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTechOutlineTablet
\ No newline at end of file
diff --git a/components/Icons/IconTechOutlineWatchAndroid.jsx b/components/Icons/IconTechOutlineWatchAndroid.jsx
new file mode 100644
index 000000000..49b74a642
--- /dev/null
+++ b/components/Icons/IconTechOutlineWatchAndroid.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTechOutlineWatchAndroid = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '48'
+ const width = props.width || '48'
+
+ return (
+
+ )
+}
+
+IconTechOutlineWatchAndroid.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTechOutlineWatchAndroid
\ No newline at end of file
diff --git a/components/Icons/IconTechOutlineWatchApple.jsx b/components/Icons/IconTechOutlineWatchApple.jsx
new file mode 100644
index 000000000..0ad59c081
--- /dev/null
+++ b/components/Icons/IconTechOutlineWatchApple.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTechOutlineWatchApple = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '48'
+ const width = props.width || '48'
+
+ return (
+
+ )
+}
+
+IconTechOutlineWatchApple.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTechOutlineWatchApple
\ No newline at end of file
diff --git a/components/Icons/IconTechOutlineWorkProject.jsx b/components/Icons/IconTechOutlineWorkProject.jsx
new file mode 100644
index 000000000..d5d77dfac
--- /dev/null
+++ b/components/Icons/IconTechOutlineWorkProject.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+const IconTechOutlineWorkProject = (props) => {
+ const stroke = props.stroke || '#262628'
+ const height = props.height || '48'
+ const width = props.width || '48'
+
+ return (
+
+ )
+}
+
+IconTechOutlineWorkProject.propTypes = {
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTechOutlineWorkProject
\ No newline at end of file
diff --git a/components/Icons/IconTextListBullet.jsx b/components/Icons/IconTextListBullet.jsx
new file mode 100644
index 000000000..b3bb26022
--- /dev/null
+++ b/components/Icons/IconTextListBullet.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const IconTextListBullet = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconTextListBullet.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTextListBullet
\ No newline at end of file
diff --git a/components/Icons/IconTextListNumbers.jsx b/components/Icons/IconTextListNumbers.jsx
new file mode 100644
index 000000000..03225979e
--- /dev/null
+++ b/components/Icons/IconTextListNumbers.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconTextListNumbers = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconTextListNumbers.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTextListNumbers
\ No newline at end of file
diff --git a/components/Icons/IconTextQuote.jsx b/components/Icons/IconTextQuote.jsx
new file mode 100644
index 000000000..084810dc7
--- /dev/null
+++ b/components/Icons/IconTextQuote.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconTextQuote = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconTextQuote.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconTextQuote
\ No newline at end of file
diff --git a/components/Icons/IconUIAlert.jsx b/components/Icons/IconUIAlert.jsx
new file mode 100644
index 000000000..8a968e817
--- /dev/null
+++ b/components/Icons/IconUIAlert.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+const IconUIAlert = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIAlert.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIAlert
\ No newline at end of file
diff --git a/components/Icons/IconUIAttach.jsx b/components/Icons/IconUIAttach.jsx
new file mode 100644
index 000000000..99e9f1b8f
--- /dev/null
+++ b/components/Icons/IconUIAttach.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUIAttach = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIAttach.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIAttach
\ No newline at end of file
diff --git a/components/Icons/IconUIBoldAdd.jsx b/components/Icons/IconUIBoldAdd.jsx
new file mode 100644
index 000000000..210f17a1f
--- /dev/null
+++ b/components/Icons/IconUIBoldAdd.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const IconUIBoldAdd = (props) => {
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIBoldAdd.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIBoldAdd
\ No newline at end of file
diff --git a/components/Icons/IconUIBoldDelete.jsx b/components/Icons/IconUIBoldDelete.jsx
new file mode 100644
index 000000000..2d2d7100a
--- /dev/null
+++ b/components/Icons/IconUIBoldDelete.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUIBoldDelete = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIBoldDelete.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIBoldDelete
\ No newline at end of file
diff --git a/components/Icons/IconUIBoldRemove.jsx b/components/Icons/IconUIBoldRemove.jsx
new file mode 100644
index 000000000..eb9f18980
--- /dev/null
+++ b/components/Icons/IconUIBoldRemove.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUIBoldRemove = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIBoldRemove.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIBoldRemove
\ No newline at end of file
diff --git a/components/Icons/IconUICalendarAdd.jsx b/components/Icons/IconUICalendarAdd.jsx
new file mode 100644
index 000000000..699e55866
--- /dev/null
+++ b/components/Icons/IconUICalendarAdd.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUICalendarAdd = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUICalendarAdd.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUICalendarAdd
\ No newline at end of file
diff --git a/components/Icons/IconUIChat.jsx b/components/Icons/IconUIChat.jsx
new file mode 100644
index 000000000..0b61da49e
--- /dev/null
+++ b/components/Icons/IconUIChat.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUIChat = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIChat.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIChat
\ No newline at end of file
diff --git a/components/Icons/IconUICheckBold.jsx b/components/Icons/IconUICheckBold.jsx
new file mode 100644
index 000000000..052534bcd
--- /dev/null
+++ b/components/Icons/IconUICheckBold.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUICheckBold = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUICheckBold.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUICheckBold
\ No newline at end of file
diff --git a/components/Icons/IconUICheckSimple.jsx b/components/Icons/IconUICheckSimple.jsx
new file mode 100644
index 000000000..efbddd783
--- /dev/null
+++ b/components/Icons/IconUICheckSimple.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconUICheckSimple = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUICheckSimple.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number,
+ wrapperClass: React.PropTypes.string
+}
+
+export default IconUICheckSimple
\ No newline at end of file
diff --git a/components/Icons/IconUIGrid.jsx b/components/Icons/IconUIGrid.jsx
new file mode 100644
index 000000000..6fe6165ee
--- /dev/null
+++ b/components/Icons/IconUIGrid.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUIGrid = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIGrid.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIGrid
\ No newline at end of file
diff --git a/components/Icons/IconUIHelp.jsx b/components/Icons/IconUIHelp.jsx
new file mode 100644
index 000000000..d97c470a7
--- /dev/null
+++ b/components/Icons/IconUIHelp.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUIHelp = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIHelp.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIHelp
\ No newline at end of file
diff --git a/components/Icons/IconUIInfo.jsx b/components/Icons/IconUIInfo.jsx
new file mode 100644
index 000000000..e804905f3
--- /dev/null
+++ b/components/Icons/IconUIInfo.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUIInfo = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIInfo.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIInfo
\ No newline at end of file
diff --git a/components/Icons/IconUILink.jsx b/components/Icons/IconUILink.jsx
new file mode 100644
index 000000000..5e97ecca8
--- /dev/null
+++ b/components/Icons/IconUILink.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUILink = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUILink.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUILink
\ No newline at end of file
diff --git a/components/Icons/IconUIPencil.jsx b/components/Icons/IconUIPencil.jsx
new file mode 100644
index 000000000..5e86def9c
--- /dev/null
+++ b/components/Icons/IconUIPencil.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const IconUIPencil = (props) => {
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIPencil.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIPencil
\ No newline at end of file
diff --git a/components/Icons/IconUISettingsGear.jsx b/components/Icons/IconUISettingsGear.jsx
new file mode 100644
index 000000000..13d3809d4
--- /dev/null
+++ b/components/Icons/IconUISettingsGear.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUISettingsGear = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUISettingsGear.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUISettingsGear
\ No newline at end of file
diff --git a/components/Icons/IconUITrashSimple.jsx b/components/Icons/IconUITrashSimple.jsx
new file mode 100644
index 000000000..dff235bca
--- /dev/null
+++ b/components/Icons/IconUITrashSimple.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const IconUITrashSimple = (props) => {
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUITrashSimple.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUITrashSimple
\ No newline at end of file
diff --git a/components/Icons/IconUIZoom.jsx b/components/Icons/IconUIZoom.jsx
new file mode 100644
index 000000000..fb2bf078a
--- /dev/null
+++ b/components/Icons/IconUIZoom.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUIZoom = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUIZoom.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUIZoom
\ No newline at end of file
diff --git a/components/Icons/IconUsersAdd.jsx b/components/Icons/IconUsersAdd.jsx
new file mode 100644
index 000000000..5c5800503
--- /dev/null
+++ b/components/Icons/IconUsersAdd.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const IconUsersAdd = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUsersAdd.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUsersAdd
\ No newline at end of file
diff --git a/components/Icons/IconUsersDelete.jsx b/components/Icons/IconUsersDelete.jsx
new file mode 100644
index 000000000..6e990c89f
--- /dev/null
+++ b/components/Icons/IconUsersDelete.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconUsersDelete = (props) => {
+ const fill = props.fill || '#262628'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUsersDelete.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUsersDelete
\ No newline at end of file
diff --git a/components/Icons/IconUsersMultiple.jsx b/components/Icons/IconUsersMultiple.jsx
new file mode 100644
index 000000000..3f263aec8
--- /dev/null
+++ b/components/Icons/IconUsersMultiple.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconUsersMultiple = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUsersMultiple.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUsersMultiple
\ No newline at end of file
diff --git a/components/Icons/IconUsersSingle.jsx b/components/Icons/IconUsersSingle.jsx
new file mode 100644
index 000000000..29fc3249c
--- /dev/null
+++ b/components/Icons/IconUsersSingle.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const IconUsersSingle = (props) => {
+ const fill = props.fill || '#62AADC'
+ const height = props.height || '16'
+ const width = props.width || '16'
+
+ return (
+
+ )
+}
+
+IconUsersSingle.propTypes = {
+ fill : React.PropTypes.string,
+ stroke : React.PropTypes.string,
+ height : React.PropTypes.number,
+ width : React.PropTypes.number
+}
+
+export default IconUsersSingle
\ No newline at end of file
diff --git a/components/Icons/LeftArrowIcon.jsx b/components/Icons/LeftArrowIcon.jsx
deleted file mode 100644
index a4e5b13fe..000000000
--- a/components/Icons/LeftArrowIcon.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-const LeftArrowIcon = ({ width, height, fill }) => {
- const f = (fill || '#A3A3AE')
- return (
-
- )
-}
-
-export default LeftArrowIcon
diff --git a/components/Icons/LinkedInIcon.jsx b/components/Icons/LinkedInIcon.jsx
deleted file mode 100644
index ca7b00b33..000000000
--- a/components/Icons/LinkedInIcon.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-
-const LinkedInIcon = ({ width, height, fill }) => {
- const f = (fill || '#007BB5')
- return (
-
- )
-}
-
-export default LinkedInIcon
diff --git a/components/Icons/MagnifyGlassIcon.jsx b/components/Icons/MagnifyGlassIcon.jsx
deleted file mode 100644
index 037ecf491..000000000
--- a/components/Icons/MagnifyGlassIcon.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-
-const MagnifyGlassIcon = ({ width, height, stroke }) => {
- const s = (stroke || '#A3A3AE')
- return (
-
- )
-}
-
-export default MagnifyGlassIcon
diff --git a/components/Icons/PlaceholderIcon.jsx b/components/Icons/PlaceholderIcon.jsx
deleted file mode 100644
index 66beca645..000000000
--- a/components/Icons/PlaceholderIcon.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-
-const PlaceholderIcon = ({ width, height, fill }) => {
- const f = (fill || '#B47DD6')
- return (
-
- )
-}
-
-export default PlaceholderIcon
\ No newline at end of file
diff --git a/components/Icons/RightArrowIcon.jsx b/components/Icons/RightArrowIcon.jsx
deleted file mode 100644
index 73c438db9..000000000
--- a/components/Icons/RightArrowIcon.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-
-const RightArrowIcon = ({ width, height, fill }) => {
- const f = (fill || '#A3A3AE')
- return (
-
- )
-}
-
-export default RightArrowIcon
diff --git a/components/Icons/SaveIcon.jsx b/components/Icons/SaveIcon.jsx
new file mode 100644
index 000000000..5251b977b
--- /dev/null
+++ b/components/Icons/SaveIcon.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const SaveIcon = ({ width = '14px', height = '14px' }) => {
+ return (
+
+ )
+}
+
+export default SaveIcon
diff --git a/components/Icons/TopcoderLogo.jsx b/components/Icons/TopcoderLogo.jsx
index c5387db35..1ea2d2bd7 100644
--- a/components/Icons/TopcoderLogo.jsx
+++ b/components/Icons/TopcoderLogo.jsx
@@ -5,7 +5,7 @@ const TopcoderLogo = ({ width, height }) => {