Merge pull request #707 from Automattic/update/paypal-logo

Components: Add `isCompact` prop to `PaymentLogo`

client/components/payment-logo/README.md

@@ -0,0 +1,25 @@
+PaymentLogo
+====
+
+## Usage
+
+```js
+import PaymentLogo from 'components/payment-logo';
+
+<PaymentLogo type="amex" />
+
+<PaymentLogo type="paypal" />
+
+<PaymentLogo type="paypal" isCompact />
+
+```
+
+## Required props
+
+* `type` – String that determines which type of logo is displayed. Currently accepts:
+   * amex
+   * discover
+   * mastercard
+   * visa
+   * paypal
+* `isCompact` (optional) – Boolean that determines if the compact PayPal logo is rendered.

client/components/payment-logo/docs/example.jsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import PaymentLogo from '../index';
+
+const PaymentLogoExamples = React.createClass( {
+	mixins: [ React.addons.PureRenderMixin ],
+
+	render() {
+		return (
+			<div className="design-assets__group">
+				<h2>PaymentLogo</h2>
+				<div>
+					<PaymentLogo type="amex" /> { ' ' }
+					<PaymentLogo type="discover" /> { ' ' }
+					<PaymentLogo type="mastercard" /> { ' ' }
+					<PaymentLogo type="visa" /> { ' ' }
+					<PaymentLogo type="paypal" isCompact /> { ' ' }
+					<PaymentLogo type="paypal" />
+				</div>
+			</div>
+		);
+	}
+} );
+
+module.exports = PaymentLogoExamples;

client/components/payment-logo/index.jsx

@@ -1,15 +1,19 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import React from 'react';
 
 const PaymentLogo = React.createClass( {
 	propTypes: {
-		type: React.PropTypes.string.isRequired
+		type: React.PropTypes.string.isRequired,
+		isCompact: React.PropTypes.bool
 	},
 
 	render: function() {
-		const classes = `payment-logo is-${ this.props.type }`;
+		const classes = classNames( 'payment-logo', `is-${ this.props.type }`, {
+			'is-compact': this.props.isCompact
+		} );
 
 		return (
 			<div className={ classes } />

client/components/payment-logo/style.scss

@@ -27,5 +27,9 @@
 		background-image: url( '/calypso/images/upgrades/paypal.svg' );
 		background-size: 70px;
 		width: 70px;
+
+		&.is-compact {
+			width: 16px;
+		}
 	}
 }

client/devdocs/design/index.jsx

@@ -48,6 +48,7 @@ var SearchCard = require( 'components/search-card' ),
 	FoldableCard = require( 'components/foldable-card/docs/example' ),
 	SectionHeader = require( 'components/section-header/docs/example' ),
 	Flag = require( 'components/flag/docs/example' ),
+	PaymentLogo = require( 'components/payment-logo/docs/example' ),
 	Count = require( 'components/count/docs/example' ),
 	Version = require( 'components/version/docs/example' ),
 	BulkSelect = require( 'components/bulk-select/docs/example' ),
@@ -214,6 +215,7 @@ module.exports = React.createClass( {
 					<TimezoneDropdown />
 					<FoldableCard />
 					<Flag />
+					<PaymentLogo />
 					<BulkSelect />
 					<SectionHeader />
 					<SectionNav />