Merge pull request #186 from appfolio/addCreditCardInput

gt - Refactor CreditCard components

src/components/CreditCardExpiration.js

@@ -27,15 +27,18 @@ export default class CreditCardExpiration extends Component {
 
   render() {
     return (
-      <Row>
-        <Col xs={12} sm={6}>
+      <Row className="no-gutters">
+        <Col xs={7} sm={8}>
           <Select
             name={this.props.monthName}
-            placeholder="Month" value={this.props.month}
-            options={monthOptions} onChange={this.onMonthSelection}
+            placeholder="Month"
+            value={this.props.month}
+            options={monthOptions}
+            onChange={this.onMonthSelection}
+            className="pr-3"
           />
         </Col>
-        <Col xs={12} sm={6}>
+        <Col xs={5} sm={4}>
           <Select
             name={this.props.yearName}
             placeholder="Year" value={this.props.year}

src/components/CreditCardInput.js

@@ -26,30 +26,37 @@ export default class CreditCardInput extends Component {
     return (
       <Row>
         <Col xs={12} sm={6}>
-          <Row>
-            <Col xs={8}>
-              <ValidatedFormGroup label="Card Number" error={errors.cardNumber}>
+          <Row className="no-gutters">
+            <Col xs={9} sm={10}>
+              <ValidatedFormGroup className="pr-3" error={errors.cardNumber}>
                 <CreditCardNumber
-                  value={cardNumber} placeholder="Card Number"
+                  value={cardNumber}
+                  placeholder="Card Number"
                   onChange={this.handleCardNumberChange}
                 />
               </ValidatedFormGroup>
             </Col>
-            <Col xs={4}>
-              <ValidatedFormGroup label="CVV" error={errors.cardCVV}>
+            <Col xs={3} sm={2}>
+              <ValidatedFormGroup error={errors.cardCVV}>
                 <PatternInput
-                  name="cardCVV" placeholder="CVV" type="text" value={cardCVV}
-                  pattern={/^[0-9]{0,5}$/} onChange={this.handleCardCVVChange}
+                  name="cardCVV"
+                  placeholder="CVV"
+                  type="text"
+                  value={cardCVV}
+                  pattern={/^[0-9]{0,5}$/}
+                  onChange={this.handleCardCVVChange}
                 />
               </ValidatedFormGroup>
             </Col>
           </Row>
         </Col>
         <Col xs={12} sm={6}>
-          <ValidatedFormGroup label="Card Expiration" error={errors.expiration}>
+          <ValidatedFormGroup error={errors.expiration}>
             <CreditCardExpiration
-              month={month} monthName="expiration"
-              year={year} yearName="expiration"
+              month={month}
+              monthName="expiration"
+              year={year}
+              yearName="expiration"
               onChange={this.handleCardExpirationChange}
             />
           </ValidatedFormGroup>

src/components/CreditCardNumber.js

@@ -89,7 +89,7 @@ export default class CreditCardNumber extends Component {
         />
         {cardType &&
           <InputGroupAddon>
-            <Icon name={cardType} />
+            <Icon name={cardType} size="lg" />
           </InputGroupAddon>
         }
       </InputGroup>
@@ -99,7 +99,7 @@ export default class CreditCardNumber extends Component {
 
 CreditCardNumber.defaultProps = {
   allowedBrands: Object.keys(TYPES),
-  placeholder: 'Credit Card Number...',
+  placeholder: 'Credit Card Number',
   restrictInput: false,
   value: '',
 

src/index.js

@@ -70,7 +70,6 @@ import BoundFormRow from './components/BoundFormRow';
 import Close from './components/Close.js';
 import CreditCardNumber from './components/CreditCardNumber.js';
 import CreditCardExpiration from './components/CreditCardExpiration.js';
-import CreditCardForm from './components/CreditCardForm.js';
 import CreditCardInput from './components/CreditCardInput.js';
 import CurrencyInput from './components/CurrencyInput.js';
 import Datapair from './components/Datapair.js';
@@ -171,7 +170,6 @@ export {
   Close,
   CreditCardNumber,
   CreditCardExpiration,
-  CreditCardForm,
   CreditCardInput,
   CurrencyInput,
   Datapair,

stories/CreditCardInput.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CreditCardExpiration, CreditCardInput, CreditCardNumber } from '../src';
+import { storiesOf } from '@kadira/storybook';
+import { array, number, text } from '@kadira/storybook-addon-knobs';
+
+const TODAY = new Date();
+
+storiesOf('CreditCardInput', module)
+  .addWithInfo('Live example', () => (
+    <CreditCardInput
+      cardNumber={text('cardNumber', '4111 1111 1111 1111')}
+      cardCVV={text('cardCVV', '12345')}
+      expirationMonth={number('expirationMonth', TODAY.getMonth() + 1)}
+      expirationYear={number('expirationYear', TODAY.getFullYear() + 1)}
+    />
+  ))
+  .addWithInfo('CreditCardExpiration', () => (
+    <CreditCardExpiration />
+  ))
+  .addWithInfo('CreditCardNumber', () => (
+    <CreditCardNumber
+      value={text('value', '4111111111111111')}
+      allowedBrands={array('allowedBrands', [
+        'american-express',
+        'diners-club',
+        'master-card',
+        'discover',
+        'jcb',
+        'visa'
+      ])}
+    />
+  ));