Merge 1ff0253 into b2368a2

docs/assets/style.css

@@ -131,3 +131,34 @@ article {
 .toolkit-example button {
   margin:.25em;
 }
+
+/* Credit Card Number */
+.ui-component-credit-card-number .credit-card-images {
+  padding: 8px 0;
+  margin-left: 90px;
+}
+.ui-component-credit-card-number .card-image {
+  width: 48px;
+  margin-right: 5px;
+}
+.ui-component-credit-card-number .card-image.disabled {
+  opacity: 0.25;
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+.ui-component-credit-card-number .card-image.active {
+  opacity: 1;
+}
+.ui-component-credit-card-number .credit-card-number-input {
+  padding: 0 12px;
+  width: 206px;
+}
+.ui-component-credit-card-number .credit-card-number-input.has-error {
+  color: #c7254e;
+}
+.ui-component-credit-card-number .credit-card-number-label {
+  width: 90px;
+}

docs/examples/CreditCardNumber.jsx

@@ -0,0 +1,18 @@
+var cc = {
+  images: true,
+  format: true,
+  number: '4485148248332663',
+  label: 'Credit Card: ',
+  accepted: ['visa','mastercard']
+};
+
+var example = (
+  <UIToolkit.CreditCardNumber
+    showImages={cc.images}
+    formatInput={cc.format}
+    defaultValue={cc.number}
+    label={cc.label}
+    accepted={cc.accepted} />
+);
+
+React.render(example, mountNode);

docs/src/Components.jsx

@@ -81,6 +81,29 @@ var Components = React.createClass({
           </ul>
         </article>
 
+        <article>
+          <h3 id="credit_card_number">Credit Card Number</h3>
+          <p>Masked Credit Card Number input</p>
+          <CustomComponent codeText={fs.readFileSync(__dirname + '/../examples/CreditCardNumber.jsx', 'utf8')} />
+          <h4>Attributes</h4>
+          <ul>
+            <li><code>accepted</code> Array - Cards to accept ( 'amex', 'discover', 'mastercard' &amp; 'visa' ) .</li>
+            <li><code>formatInput</code> Boolean - ( default false ) Whether to Format Input for easier reading</li>
+            <li><code>showImages</code> Boolean - ( default false ) Whether to show Credit Card Images</li>
+            <li><code>defaultValue</code> String - ( default empty ) Initial Value of Credit Card Number</li>
+            <li><code>name</code> String - ( default 'credit-card-number' ) Name of Input</li>
+            <li><code>id</code> String - ( default 'credit-card-number' ) ID for Input</li>
+          </ul>
+          <h4>Sample Cards</h4>
+          <ul>
+            <li><code>4485148248332663</code> Visa</li>
+            <li><code>5330757227258832</code> Mastercard</li>
+            <li><code>375669917200734</code> American Express ( not "accepted" for demo )</li>
+            <li><code>6011948151581455</code> Discover ( not "accepted" for demo )</li>
+          </ul>
+
+        </article>
+
       </section>
     );
   }

docs/src/Nav.jsx

@@ -22,6 +22,7 @@ var Nav = React.createClass({
               <li><a href="#rating">Rating</a></li>
               <li><a href="#image">Image</a></li>
               <li><a href="#tile">Tile</a></li>
+              <li><a href="#credit_card_number">Credit Card Number</a></li>
             </ul>
           </li>
         </ul>

src/components/credit-card-number/.gitignore

@@ -0,0 +1,4 @@
+.idea
+.project
+dev/app.js
+node_modules

src/components/credit-card-number/__tests__/creditcard-test.js

@@ -0,0 +1,33 @@
+/** @jsx React.DOM */
+
+jest.dontMock('../code/views/creditCardNumberView.jsx');
+
+var React = require('react/addons');
+var CreditCardNumberComponent = require('../code/views/creditCardNumberView.jsx');
+var TestUtils = React.addons.TestUtils;
+
+describe('CreditCardNumberComponent', function() {
+
+  it('is an element', function() {
+    expect(TestUtils.isElement(<CreditCardNumberComponent />)).toBeTruthy();
+  });
+
+  it('should render a label', function() {
+    var labelCheck = TestUtils.renderIntoDocument(
+      <CreditCardNumberComponent label="Credit Card: " />
+    );
+
+    var renderedLabel = TestUtils.findRenderedDOMComponentWithClass(labelCheck, 'credit-card-number-label');
+    expect(renderedLabel).toBeDefined();
+  });
+
+  it('should render credit card images', function() {
+    var imagesCheck = TestUtils.renderIntoDocument(
+      <CreditCardNumberComponent showImages />
+    );
+
+    var renderedImages = TestUtils.findRenderedDOMComponentWithClass(imagesCheck, 'credit-card-images');
+    expect(renderedImages).toBeDefined();
+  });
+
+});

src/components/credit-card-number/code/index.js

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

src/components/credit-card-number/code/views/creditCardNumberView.jsx

@@ -0,0 +1,105 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  propTypes: {
+    accepted: React.PropTypes.array,
+    cardNumber: React.PropTypes.string,
+    cardType: React.PropTypes.oneOf(['amex', 'discover', 'mastercard', 'visa']),
+    defaultValue: React.PropTypes.string,
+    id: React.PropTypes.string,
+    label: React.PropTypes.string,
+    name: React.PropTypes.string
+  },
+
+  getInitialState: function() {
+
+    var card = this.updateCard(this.props.defaultValue);
+
+    return {
+      cardNumber: card.cardNumber || '',
+      cardType: card.cardType || ''
+    };
+  },
+
+  getDefaultProps: function() {
+    return {
+      accepted: ['amex', 'discover', 'mastercard', 'visa'],
+      formatInput: false,
+      id: 'credit-card-number',
+      name: 'credit-card-number',
+      placeHolder: '• • • •   • • • •   • • • •   • • • •',
+      showImages: false
+    };
+  },
+
+  updateCard: function(cardNumber) {
+
+    if(typeof cardNumber === 'undefined'){
+      return false;
+    }
+
+    var cardInfo = this.getCard(cardNumber);
+    var formattedCard = (this.props.formatInput) ? cardNumber.replace(/(.{4})/g, '$1 ').trim() : cardNumber;
+
+    var card = {
+      cardNumber: formattedCard,
+      cardType: cardInfo.type
+    };
+
+    this.setState(card);
+
+    return card;
+  },
+
+  getCard: function(cardNumber) {
+
+    var cards = [
+      {
+        type: 'amex',
+        pattern: /^3[47]/,
+        format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
+        length: [15]
+      },
+      {
+        type: 'discover',
+        pattern: /^(6011|65|64[4-9]|622)/,
+        format: /(\d{1,4})/g,
+        length: [16]
+      },
+      {
+        type: 'mastercard',
+        pattern: /^5[1-5]/,
+        format: /(\d{1,4})/g,
+        length: [16]
+      },
+      {
+        type: 'visa',
+        pattern: /^4/,
+        format: /(\d{1,4})/g,
+        length: [13, 14, 15, 16]
+      }
+    ];
+
+    for (var i=0; i<cards.length; i++) {
+      var card = cards[i];
+      if (card.pattern.test(cardNumber) && this.props.accepted.indexOf(card.type) > -1)
+      {
+        return card;
+      }
+    }
+
+    return {
+      type: ''
+    };
+  },
+
+  handleChange: function(e) {
+    var cardNumber = e.target.value.replace(/\D/g, '');
+    this.updateCard(cardNumber);
+  },
+
+  render: function() {
+    return require('../templates/creditCardNumberTemplate.jsx')(this);
+  }
+});

src/components/credit-card-number/index.js

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

src/components/credit-card-number/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-creditcard.js

src/components/credit-card-number/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-creditcard > dist/ui-component-creditcard-standalone.js

src/ui-toolkit.js

@@ -7,5 +7,6 @@ UIToolkit.Rating = require('./components/rating');
 UIToolkit.Reviews = require('./components/reviews');
 UIToolkit.Tile = require('./components/tile');
 UIToolkit.Image = require('./components/image');
+UIToolkit.CreditCardNumber = require('./components/credit-card-number');
 
 module.exports = UIToolkit;