Update styles for latest button changes (#8)

* Update styles for latest button changes * fix my spelling failure
paypal · Jul 26, 2017 · 2b99c0a · 2b99c0a
1 parent 58449d9
commit 2b99c0a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 13 deletions.
diff --git a/src/app/client/js/components/app.jsx b/src/app/client/js/components/app.jsx
@@ -20,7 +20,7 @@ let layout = [
     {
         name: 'Button Styles',
         patterns: [
-            patterns.styles, patterns.credit, patterns.pay, patterns.buynow
+            patterns.checkout, patterns.credit, patterns.pay, patterns.buynow
         ]
     },
 

diff --git a/src/app/client/js/patterns/buynow.jsx b/src/app/client/js/patterns/buynow.jsx
@@ -34,6 +34,9 @@ export let buynow = {
                     label: 'buynow',
                     fundingicons: true, // optional
                     branding: true // optional
+                    size:  'small', // small | medium | large | responsive
+                    shape: 'rect',   // pill | rect
+                    color: 'gold'   // gold | blue | silve | black
                 },
 
                 // PayPal Client IDs - replace with your own

diff --git a/src/app/client/js/patterns/styles.jsx → src/app/client/js/patterns/checkout.jsx b/src/app/client/js/patterns/styles.jsx → src/app/client/js/patterns/checkout.jsx
@@ -1,16 +1,16 @@
 
 import React from 'react';
 
-export let styles = {
+export let checkout = {
 
-    slug: 'styles',
+    slug: 'checkout',
 
-    name: `Button Styles`,
+    name: `Checkout Button`,
 
-    fullName: `Express Checkout Custom Button Styles`,
+    fullName: `Express Checkout Custom Button`,
 
     intro: (
-        <p>Customize your <b>PayPal</b> button with colors, sizes and shapes.</p>
+        <p>Customize your <b>PayPal Checkout</b> button with colors, sizes and shapes.</p>
     ),
 
     code: (ctx) => `
@@ -31,12 +31,15 @@ export let styles = {
                 // Specify the style of the button
 
                 style: {
-                    label: 'checkout', // checkout | credit | pay
-                    size:  'small',    // small | medium | responsive
+                    label: 'checkout'
+                    size:  'small',    // small | medium | large | responsive
                     shape: 'pill',     // pill | rect
-                    color: 'blue'      // gold | blue | silver
+                    color: 'blue'      // gold | blue | silver | black
                 },
 
+                // PayPal Client IDs - replace with your own
+                // Create a PayPal app: https://developer.paypal.com/developer/applications/create
+
                 client: {
                     sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
                     production: '<insert production client id>'

diff --git a/src/app/client/js/patterns/credit.jsx b/src/app/client/js/patterns/credit.jsx
@@ -32,8 +32,9 @@ export let credit = {
 
                 style: {
                     label: 'credit',
-                    size:  'small', // small | medium
-                    shape: 'rect'   // pill | rect
+                    size:  'small', // small | medium | large | responsive
+                    shape: 'rect',   // pill | rect
+                    color: 'creditblue'   // creditblue | black
                 },
 
                 // PayPal Client IDs - replace with your own

diff --git a/src/app/client/js/patterns/index.jsx b/src/app/client/js/patterns/index.jsx
@@ -2,7 +2,7 @@
 export * from './client';
 export * from './server';
 export * from './braintree';
-export * from './styles';
+export * from './checkout';
 export * from './credit';
 export * from './pay';
 export * from './buynow';

diff --git a/src/app/client/js/patterns/pay.jsx b/src/app/client/js/patterns/pay.jsx
@@ -31,7 +31,10 @@ export let pay = {
                 // Specify the style of the button
 
                 style: {
-                    label: 'pay'
+                    label: 'pay',
+                    size:  'small', // small | medium | large | responsive
+                    shape: 'rect',   // pill | rect
+                    color: 'gold'   // gold | blue | silver | black
                 },
 
                 // PayPal Client IDs - replace with your own