From ee8120af20efb43229c391dbf394b3e2568772a4 Mon Sep 17 00:00:00 2001 From: levithomason Date: Fri, 2 Oct 2015 02:16:25 -0500 Subject: [PATCH 1/8] add field options, add numberToWord util --- components/Field/Field.js | 22 ++++++++++++++- components/Grid/Column.js | 30 +++++--------------- paths.js | 1 + test/components/Field-test.js | 53 +++++++++++++++++++++++++++-------- test/utils/React-util.js | 2 +- utils/numberToWord.js | 22 +++++++++++++++ webpack.tests.js | 4 +-- 7 files changed, 95 insertions(+), 39 deletions(-) create mode 100644 utils/numberToWord.js diff --git a/components/Field/Field.js b/components/Field/Field.js index 3f5f337d83..cfa079d9de 100644 --- a/components/Field/Field.js +++ b/components/Field/Field.js @@ -1,14 +1,34 @@ import React, {Component, PropTypes} from 'react'; +import classNames from 'classnames'; +import numberToWord from 'utils/numberToWord'; class Field extends Component { static propTypes = { children: PropTypes.node, + disabled: PropTypes.bool, + error: PropTypes.bool, + inline: PropTypes.bool, label: PropTypes.string, + large: PropTypes.bool, + required: PropTypes.bool, + small: PropTypes.bool, + width: PropTypes.number, }; render() { + let classes = classNames( + 'sd-field', + this.props.large && 'large', + this.props.small && 'small', + this.props.inline && 'inline', + this.props.disabled && 'disabled', + this.props.required && 'required', + this.props.width && numberToWord(this.props.width) + ' wide', + 'field', + this.props.error && 'error' + ); return ( -
+
{this.props.label && } {this.props.children}
diff --git a/components/Grid/Column.js b/components/Grid/Column.js index 2b133bfb24..1943bf19ac 100644 --- a/components/Grid/Column.js +++ b/components/Grid/Column.js @@ -1,5 +1,6 @@ import classNames from 'classnames'; import React, {Component, PropTypes} from 'react'; +import numberToWord from 'utils/numberToWord'; class Column extends Component { static propTypes = { @@ -10,30 +11,13 @@ class Column extends Component { }; render() { - let columnWidth = { - 1: 'one wide', - 2: 'two wide', - 3: 'three wide', - 4: 'four wide', - 5: 'five wide', - 6: 'six wide', - 7: 'seven wide', - 8: 'eight wide', - 9: 'nine wide', - 10: 'ten wide', - 11: 'eleven wide', - 12: 'twelve wide', - 13: 'thirteen wide', - 14: 'fourteen wide', - 15: 'fifteen wide', - 16: 'sixteen wide', - }; - let classes = classNames('sd-column', columnWidth[this.props.width], 'column'); + let classes = classNames( + 'sd-column', + this.props.width && numberToWord(this.props.width) + ' wide', + 'column' + ); return ( -
+
{this.props.children}
); diff --git a/paths.js b/paths.js index 2b47f4ae01..5d00ab7bd8 100644 --- a/paths.js +++ b/paths.js @@ -10,6 +10,7 @@ module.exports = { gulp: PROJECT_ROOT + '/gulp', components: PROJECT_ROOT + '/components', test: PROJECT_ROOT + '/test', + utils: PROJECT_ROOT + '/utils', testMocks: PROJECT_ROOT + '/test/mocks', node_modules: PROJECT_ROOT + '/node_modules', }; diff --git a/test/components/Field-test.js b/test/components/Field-test.js index 6b4452ac83..0ae6489cd4 100644 --- a/test/components/Field-test.js +++ b/test/components/Field-test.js @@ -1,18 +1,47 @@ import React from 'react'; import Field from 'components/Field/Field'; -import Textarea from 'components/Textarea/Textarea'; +import numberToWord from 'utils/numberToWord'; -describe('Field', () => { +describe.only('Field', () => { it('has a label', () => { - render().findTag('label').should.be.ok; - render().findTag('label').props.children.should.equal('First Name'); - }); - it('renders textarea child element', () => { - let renderedField = render( - -