v0.3.2

README.md

@@ -1,99 +1,97 @@
-# React Credit Cards (rccs)
----
-
-[? ADD LOGO HERE]
+# React Credit Cards
+===
 
 [![Travis](https://travis-ci.org/amarofashion/react-credit-cards.svg?branch=master)](https://travis-ci.org/amarofashion/react-credit-cards) [![Code Climate](https://codeclimate.com/github/amarofashion/react-credit-cards/badges/gpa.svg)](https://codeclimate.com/github/amarofashion/react-credit-cards)
 
-React Component to render a beautiful credit card on screen. It integrates with your payment form and updates card brand in real-time.
-
-[ADD GIF HERE]
+A credit card component for React 0.14+.
 
-## Getting Started
+![demo](https://raw.githubusercontent.com/amarofashion/react-credit-cards/master/docs/media/rccs.gif)
 
-To use `rccs` you'll need to install it locally in your project and import the component. There's no need to manually import the `.scss` as it will be done automatically.
+[Demo](https://amarofashion.github.io/react-credit-cards/)
 
 ### Install
-
-Install `rccs` locally in your project:
-
-    npm install --save-dev react-credit-cards
+```
+npm install --save-dev react-credit-cards
+```
 
 ### Usage
 
-To use `rccs` you'll need to import it in your project:
-
 ```jsx
     import Cards from 'react-credit-cards';
     ...
 
     <Cards
-      number={paymentForm.props.number}
-      name={paymentForm.props.name}
-      expiry={paymentForm.props.expiry}
-      cvc={paymentForm.props.cvc}
-      focused={paymentForm.props.name}
+      number={input.number.value}
+      name={input.name.value}
+      expiry={input.expiry.value}
+      cvc={input.cvc.value}
+      focused={state.focused}
     />
 ```
 
+Don't forget to import the `react-credit-cards/lib/styles.scss` in your main.scss file or import it directly in your component if you are using webpack.
+
 ### Features
 
-- We support all credit card brands used in [Payment](https://github.com/jessepollak/payment) and also Hipercard.
+- We support all credit card issuers available in [Payment](https://github.com/jessepollak/payment) plus Hipercard (a brazilian credit card).
 
-### Demo
+## Props
 
-## Options
+- `name` {string}: Name on card. *
+- `number` {string|number}: Card number. *
+- `expiry` {string|number}: Card expiry date. *
+- `cvc` {string|number}: Card CVC/CVV. *
+- `focused` {string}: Focused card field. `name|number|expiry|cvc` *
+- `locale` {object}: Localization text (e.g. `{ valid: 'valid thru' }`).
+- `placeholders` {object}: Placeholder text (e.g. `{ name: 'YOUR NAME HERE' }`).
+- `acceptedCards` {array}: If you want to limit the accepted cards. (e.g. `['visa', 'mastercard']`
+- `callback` {func}: A callback function that will be called with 2 paramaters: `typeState, isValid`
 
-You can change the initial options passing props to the component:
+\* *Required fields*
 
-- `acceptedCards` {array}: Accepted credit card brands.
-- `callback` {func}: A callback function.
-- `name` {string}: Name on card.
-- `number` {string|number}: Card number.
-- `expiry` {string|number}: Card expiry date.
-- `cvc` {string|number}: Card CVC/CVV.
-- `focused` {string}: Focused field on card.
-- `locale` {object}: Localization text on card (e.g. `valid: 'valid thru'`).
-- `placeholders` {object}: Placeholder text on card (e.g. `name: 'YOUR NAME HERE'`).
 
 ## SCSS options
 
 **Credit Card sizing**
 
-- `$rccs-card-ratio`: Credit card ratio
-- `$rccs-size`: Credit card width 
-- `$rccs-padding`: Padding around the card
+- `$rccs-card-ratio`: Card ratio. Defaults to `1.5858`
+- `$rccs-size`: Card width. Defaults to `290px`
 
 **Credit Card fonts**
 
-- `$rccs-name-font-size`: Name size.
-- `$rccs-name-font-family`: Name family.
-- `$rccs-number-font-size`: Number size.
-- `$rccs-number-font-family`: Number family.
-- `$rccs-valid-font-size`: Valid size.
-- `$rccs-expiry-font-size`: Expiry size.
-- `$rccs-expiry-font-family`: Expiry family.
-- `$rccs-cvc-font-size`: CVC size.
-- `$rccs-cvc-font-family`: CVC family.
-- `$rccs-cvc-color`: CVC color.
+- `$rccs-name-font-size`: Defaults to `17px`
+- `$rccs-name-font-family`: Defaults to `Consolas, Courier, monospace`
+- `$rccs-number-font-size`: Defaults to `17px`
+- `$rccs-number-font-family`: Defaults to `Consolas, Courier, monospace`
+- `$rccs-valid-font-size`: Defaults to `10px`
+- `$rccs-expiry-font-size`: Defaults to `16px`
+- `$rccs-expiry-font-family`: Defaults to `Consolas, Courier, monospace`
+- `$rccs-cvc-font-size`: Defaults to `14px`
+- `$rccs-cvc-font-family`: Defaults to `Consolas, Courier, monospace`
+- `$rccs-cvc-color`: Defaults to `#222`
 
 **Credit Card styling**
 
-- `$rccs-shadow`: Credit card shadow.
-- `$rccs-light-text-color`: Light text color.
-- `$rccs-dark-text-color`: Dark text color.
-- `$rccs-stripe-bg-color`: Stripe background color on back.
-- `$rccs-signature-background`: Sginature space background.
-- `$rccs-default-background`: Default card background.
-- `$rccs-unknown-background`: Unknown card background.
-- `$rccs-background-transition`: Card background transition.
-- `$rccs-animate-background`: Card background animation (boolean).
+- `$rccs-shadow`: Defaults to `0 0 20px rgba(#000, 0.2)`
+- `$rccs-light-text-color`: Card text color for dark cards. Defaults to `#fff`
+- `$rccs-dark-text-color`: Card text color for light cards. Defaults to `#555`
+- `$rccs-stripe-bg-color`: Stripe background color in the back. Defaults to `#2a1d16`
+- `$rccs-signature-background`: Signature background in the back. Defaults to `repeating-linear-gradient(0.1deg, #fff 20%, #fff 40%, #fea 40%, #fea 44%, #fff 44%)`
+- `$rccs-default-background`: Default card background. Defaults to `linear-gradient(25deg, #939393, #717171)`
+- `$rccs-unknown-background`: Unknown card background. Defaults to `linear-gradient(25deg, #999, #999)`
+- `$rccs-background-transition`: Card background transition. Defaults to `all 0.5s ease-out`
+- `$rccs-animate-background`: Card background animation. Defaults to `true`
 
 **Credit Card brands**
 
-- `$rccs-amex-background`: Amex card background;
-
-**NOTE:** Syntax is the same for every available issuer.
+- `$rccs-amex-background`: Defaults to `linear-gradient(25deg, #308c67, #a3f2cf)`
+- `$rccs-dankort-background`: Defaults to `linear-gradient(25deg, #ccc, #999)`
+- `$rccs-dinersclub-background`: Defaults to `linear-gradient(25deg, #fff, #eee)`
+- `$rccs-discover-background`: Defaults to `linear-gradient(25deg, #fff, #eee)`
+- `$rccs-mastercard-background`: Defaults to `linear-gradient(25deg, #f37b26, #fdb731)`
+- `$rccs-visa-background`: Defaults to `linear-gradient(25deg, #0f509e, #1399cd)`
+- `$rccs-elo-background`: Defaults to `linear-gradient(25deg, #211c18, #aaa7a2)`
+- `$rccs-hipercard-background`: Defaults to `linear-gradient(25deg, #8b181b, #de1f27)`
 
 ## Development
 

demo/component.jsx

@@ -48,7 +48,7 @@ export default class Demo extends React.Component {
   };
 
   handleCallback(type, isValid) {
-    console.log(type, isValid);
+    console.log(type, isValid); //eslint-disable-line no-console
   }
 
   render() {
@@ -71,7 +71,7 @@ export default class Demo extends React.Component {
                 type="text"
                 name="number"
                 placeholder="Card Number"
-                onKeyUp={this.handleInputChange}
+                onChange={this.handleInputChange}
                 onFocus={this.handleInputFocus}
               />
               <div>E.g.: 49..., 51..., 36..., 37...</div>
@@ -81,7 +81,7 @@ export default class Demo extends React.Component {
                 type="text"
                 name="name"
                 placeholder="Name"
-                onKeyUp={this.handleInputChange}
+                onChange={this.handleInputChange}
                 onFocus={this.handleInputFocus}
               />
             </div>
@@ -90,14 +90,14 @@ export default class Demo extends React.Component {
                 type="text"
                 name="expiry"
                 placeholder="Valid Thru"
-                onKeyUp={this.handleInputChange}
+                onChange={this.handleInputChange}
                 onFocus={this.handleInputFocus}
               />
               <input
                 type="text"
                 name="cvc"
                 placeholder="CVC"
-                onKeyUp={this.handleInputChange}
+                onChange={this.handleInputChange}
                 onFocus={this.handleInputFocus}
               />
             </div>

lib/styles.scss

@@ -1,6 +1,5 @@
 $rccs-card-ratio: 1.5858 !default;
 $rccs-size: 290px !default;
-$rccs-padding: 5px !default;
 
 $rccs-name-font-size: 17px !default;
 $rccs-name-font-family: Consolas, Courier, monospace !default;
@@ -21,7 +20,7 @@ $rccs-signature-background: repeating-linear-gradient(0.1deg, #fff 20%, #fff 40%
 
 $rccs-default-background: linear-gradient(25deg, #939393, #717171) !default;
 $rccs-unknown-background: linear-gradient(25deg, #999, #999) !default;
-$rccs-background-transition: all 0.8s ease-out !default;
+$rccs-background-transition: all 0.5s ease-out !default;
 
 $rccs-animate-background: true;
 
@@ -66,9 +65,8 @@ $rccs-visaelectron-logo: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBl
 
 .rccs {
   margin: 0 auto;
-  padding: $rccs-padding;
   perspective: 1000px;
-  width: $rccs-size + ($rccs-padding * 2);
+  width: $rccs-size;
 
   &__card {
     height: $rccs-size / $rccs-card-ratio;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-credit-cards",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "",
   "author": "AMARO Fashion <[email protected]>",
   "contributors": [