airwallex-payment-elements - npm Package Compare versions

Comparing version 0.0.27 to 0.0.28

dist/index.js

@@ -109,3 +109,3 @@ import { css, html, LitElement } from 'lit-element';
             .countryOrRegion}&currency=${this.currency}&theme=${JSON.stringify(this.theme)}"
-        title="Secure airwallex payment frame"
+        title="Secured airwallex payment frame"
       />
@@ -112,0 +112,0 @@ `;

package.json

 {
   "name": "airwallex-payment-elements",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

README.md

@@ -103,8 +103,96 @@ # airwallex-payment-elements
 interface ITheme {
-  variant: 'bootstrap' | 'default';
-  fastCheckoutColor: 'purple' | 'yellow' | 'orange' | 'red' | 'green' | 'blue' | 'pink';
-  checkoutColor: 'purple' | 'yellow' | 'orange' | 'red' | 'green' | 'blue' | 'pink';
+  variant: 'outlined' | 'filled' | 'standard' | 'bootstrap';
+  palette: {
+    primary: Color; // https://material-ui.com/customization/color/#color
+    secondary: Color; // https://material-ui.com/customization/color/#color
+    error: Color; // https://material-ui.com/customization/color/#color
+    background: {
+      paper: string;
+      default: string;
+    };
+    text: {
+      primary: string;
+      secondary: string;
+      disabled: string;
+      hint: string;
+    };
+  };
+  typography: {
+    htmlFontSize: number;
+    fontSize: number;
+    fontFamily: string;
+    fontWeightLight: number;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
+    button: {
+      textTransform: string;
+      fontSize: number;
+      fontWeight: number;
+      lineHeight: number;
+    };
+  };
+  shape: {
+    borderRadius: number;
+  };
+  zIndex: {
+    mobileStepper: number;
+    appBar: number;
+    drawer: number;
+    modal: number;
+    snackbar: number;
+    tooltip: number;
+  };
 }
 ```
 
+Default value as below:
+
+```json
+{
+  variant: 'outlined',
+  palette: {
+    primary: orange,
+    secondary: grey,
+    error: red,
+    background: {
+      paper: '#fff',
+      default: '#fafafa'
+    },
+    text: {
+      primary: '#2A2A2A',
+      secondary: '#54545E',
+      disabled: '#A9A9AE',
+      hint: '#d1d2d5'
+    }
+  },
+  typography: {
+    htmlFontSize: 16,
+    fontSize: 14,
+    fontFamily: 'AxFFDIN'
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    button: {
+      textTransform: 'unset',
+      fontSize: 16,
+      fontWeight: 500,
+      lineHeight: 2.15
+    }
+  },
+  shape: {
+    borderRadius: 4
+  },
+  zIndex: {
+    mobileStepper: 1000,
+    appBar: 1100,
+    drawer: 1200,
+    modal: 1300,
+    snackbar: 1400,
+    tooltip: 1500
+  }
+}
+```
+
 Before passing into the theme props, you must ```stringify```(i.e. ```JSON.stringify()```) it as string.
@@ -111,0 +199,0 @@

src/index.ts

@@ -121,3 +121,3 @@ import { css, html, LitElement } from 'lit-element';
           .countryOrRegion}&currency=${this.currency}&theme=${JSON.stringify(this.theme)}"
-        title="Secure airwallex payment frame"
+        title="Secured airwallex payment frame"
       />
@@ -124,0 +124,0 @@ `;

No alert changes

Improved metrics

Total package byte prevSize

2854948

increased by0.06%

Number of lines in readme file

213

increased by70.4%

No dependency changes